/* Granite Cove Capital — v4 with hero parallax, hidden header over hero, improved reveals, modal popups */
:root{
  --bg: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e5e7eb;
  --accent: #0f5b8d;
  --accent-ink: #0b2f4a;
  --alt: #f7f9fb;
  --danger: #b91c1c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color:var(--ink); background:var(--bg) }

h1,h2,h3{font-family: Merriweather, Georgia, 'Times New Roman', serif; line-height:1.25; margin:0 0 .6rem}
h1{font-size: clamp(2rem, 3vw, 2.8rem)}
h2{font-size: clamp(1.6rem, 2.4vw, 2rem)}
p{margin:.6rem 0 1rem}

.container{width:min(1100px, 92vw); margin:0 auto}

/* Header */
.site-header{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,0); backdrop-filter:none; border-bottom:1px solid transparent; transition: background .3s ease, border-color .3s ease, opacity .25s ease, transform .25s ease }
.site-header.scrolled{ background:rgba(255,255,255,.84); backdrop-filter: blur(6px); border-bottom-color: var(--line) }
.header-hidden{opacity:0; transform: translateY(-8px); pointer-events:none}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:.7rem 0}
.brand img{height:28px; display:block}
@media (max-width: 880px){ .brand img{height:24px} }

.primary-nav a{ color:var(--muted); text-decoration:none; margin-left:1.2rem; font-weight:500; position:relative; padding:.2rem 0 }
.primary-nav a:hover, .primary-nav a:focus{color:var(--accent)}
.primary-nav a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent); transition:width .25s ease }
.primary-nav a:hover::after{width:100%}

/* HERO — fullscreen splash */
.hero-full{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; background:linear-gradient(180deg, #f8fafc 0%, #ffffff 65%); overflow:hidden }
.hero-inner{max-width:1000px; margin:0 auto; padding:24px; will-change:transform}
.hero-logo{height: clamp(140px, 24vw, 260px); display:block; margin:0 auto 24px; will-change:transform}
.tagline{ font-family:Merriweather, Georgia, 'Times New Roman', serif; font-weight:700; font-size: clamp(1.6rem, 3vw, 2.4rem); color:var(--accent-ink); letter-spacing:.2px; will-change:transform }

/* Sections */
.section{padding:84px 0}
.section.alt{background:var(--alt)}
.grid.two-col{display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:start}
.narrow{max-width:720px}

.portrait{margin:0; text-align:center}
.portrait img{width:100%; max-width:340px; border-radius:12px; box-shadow:0 10px 24px rgba(2,12,27,.08)}
.portrait figcaption{color:var(--muted); font-size:.9rem; margin-top:.4rem}

.bullets{padding-left:1.1rem}
.bullets li{margin:.3rem 0}

/* Login */
.login-form .field{margin:0 0 .9rem}
label{display:block; font-weight:600; margin-bottom:.35rem}
input[type="text"], input[type="password"]{ width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius:10px; outline:0; transition:border-color .2s ease, box-shadow .2s ease; background:#fff }
input:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(15,91,141,.1)}

.btn{ display:inline-block; border:0; background:var(--accent); color:#fff; border-radius:999px; padding:.7rem 1.1rem; font-weight:600; cursor:pointer; transition:transform .06s ease, background .2s }
.btn:hover{background:var(--accent-ink)}
.btn:active{transform:translateY(1px)}

.error{color:var(--danger); margin:.6rem 0 0; min-height:1.2em; font-weight:600}
.help{color:var(--muted); font-size:.9rem}

/* Contact — upgraded card */
.contact-card{ border:1px solid var(--line); border-radius:16px; padding:28px; background:#fff; box-shadow:0 12px 28px rgba(2,12,27,.06) }
.contact-intro h2{margin-bottom:.2rem}
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px }
.contact-item{ display:flex; align-items:center; gap:14px; text-decoration:none; border:1px solid var(--line); border-radius:12px; padding:16px; color:var(--ink); background:#fff; transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease }
.contact-item:hover{ transform: translateY(-2px); box-shadow:0 12px 20px rgba(2,12,27,.08); border-color:#d1d5db }
.contact-item .icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#eef6fb; color:var(--accent) }
.contact-item .label{ display:block; color:var(--muted); font-size:.85rem }
.contact-item .value{ display:block; font-weight:600 }

.contact-note{margin-top:10px; color:var(--muted)}

@media (max-width: 780px){
  .grid.two-col{grid-template-columns: 1fr; gap:18px}
  .contact-grid{grid-template-columns: 1fr}
}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:#fff}
.foot-grid{display:flex; align-items:center; justify-content:space-between; padding:1rem 0; gap:1rem; flex-wrap:wrap}
.footer-links a{color:var(--muted); text-decoration:none; margin-left:1rem}
.footer-links a:hover{color:var(--accent)}

/* Reveal-on-scroll animations (stronger) */
.reveal-up{opacity:0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal-fade{opacity:0; transition: opacity 1s ease}
.visible{opacity:1; transform:none}

/* Modals */
.modal{ padding:0; border:0; border-radius:16px; width:min(820px, 92vw); background:transparent }
.modal::backdrop{ background: rgba(2,12,27,.5); backdrop-filter: blur(2px) }
.modal-card{ background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--line); display:grid; grid-template-rows:auto 1fr auto; max-height:80vh }
.modal-card header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line) }
.modal-card header h3{ margin:0; font-size:1.2rem }
.modal-close{ border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--muted) }
.modal-body{ padding:18px 20px; overflow:auto }
.modal-card footer{ padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-up, .reveal-fade{transition:none}
  .parallax{transform:none !important}
}

/* Responsive tweaks */
@media (max-width: 880px){
  .hero-logo{height: clamp(120px, 26vw, 220px)}
  .tagline{font-size: clamp(1.4rem, 4.5vw, 2rem)}
}