/* ============================================================
   PRIME SASH WINDOWS — main.css
   Design based on Imperial Furniture aesthetic
   ============================================================ */

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

:root {
  --navy:       #0A1628;
  --navy-hover: #071020;
  --cream:      #FAFAF8;
  --cream2:     #F3F0EA;
  --cream3:     #E8E4DC;
  --ink:        #181818;
  --muted:      #84837C;
  --silver:     #9E9E90;
  --white:      #ffffff;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', sans-serif;
}

html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 300; overflow-x: hidden; padding-top: 82px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #1a2d4d; }
::selection { background: var(--navy); color: #fff; }

/* ── SILVER SHIMMER ── */
.silver {
  background: linear-gradient(105deg,
    #3A3A3A 0%, #787878 14%, #B8B8B8 26%,
    #E2E2E2 36%, #F6F6F6 50%, #E2E2E2 64%,
    #B8B8B8 74%, #787878 86%, #3A3A3A 100%);
  background-size: 260% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 260% center; }
}

/* ── SILVER LINE ── */
.silver-line {
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, #707068 15%, #B8B8AE 40%,
    #D4D4C8 50%, #B8B8AE 60%, #707068 85%, transparent 100%);
}

/* ── BUTTONS ── */
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--sans); font-size: .58rem; font-weight: 300;
  letter-spacing: .4em; text-transform: uppercase;
  padding: .9rem 2.4rem; cursor: pointer;
  background: none; border: none; transition: all .3s;
}
.btn-navy  { background: var(--navy); color: rgba(255,255,255,.9); border: 1px solid var(--navy); }
.btn-navy:hover { background: var(--navy-hover); }
.btn-outline { border: 1px solid var(--silver); color: var(--muted); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-light  { border: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.7); }
.btn-light:hover { border-color: #fff; color: #fff; }

/* ── SHARED SECTION UTILS ── */
.sec { padding: 8rem 5vw; }
.eyebrow { font-size: .52rem; letter-spacing: .6em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.s-title  { font-family: var(--serif); font-size: clamp(2.6rem, 4.5vw, 4.5rem); font-weight: 500; line-height: 1.12; }
.rule     { width: 36px; height: 2px; background: var(--silver); margin: 2rem 0; }
.body-text { font-size: .84rem; line-height: 1.95; color: var(--muted); }
.reveal   { opacity: 0; transform: translateY(22px); transition: opacity .85s, transform .85s; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── ANIMATIONS ── */
@keyframes aUp  { from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);} }
@keyframes aFade { from{opacity:0;}to{opacity:1;} }

/* ============================================================
   NAV
   ============================================================ */
#if-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw; min-height: 82px;
}

.logo-wrap {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
  padding: 8px 0; text-decoration: none;
  flex-shrink: 0;
}
.logo-wrap .silver-line { width: 100%; min-width: 180px; }
.logo {
  font-family: var(--sans); font-size: 1.25rem; font-weight: 400;
  letter-spacing: .55em; text-transform: uppercase;
  line-height: 1.25; display: block;
  background: linear-gradient(105deg,
    #707070 0%, #A8A8A8 12%, #D0D0D0 22%,
    #F0F0F0 32%, #FFFFFF 42%, #F8F8F8 50%,
    #FFFFFF 58%, #F0F0F0 68%, #D0D0D0 78%,
    #A8A8A8 88%, #707070 100%);
  background-size: 260% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}

/* 2-ROW NAV */
.nav-rows { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.nav-row { list-style: none; display: flex; gap: 2rem; justify-content: flex-end; margin: 0; padding: 0; }

/* Row 1 — primary, brighter */
.nav-row:first-child li + li { border-left: 1px solid rgba(158,158,144,.2); padding-left: 2rem; }
.nav-row:first-child a {
  font-size: .78rem; font-weight: 400; letter-spacing: .25em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,.75); transition: color .3s; position: relative;
  white-space: nowrap;
}
.nav-row:first-child a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: rgba(255,255,255,.5); transition: width .3s;
}
.nav-row:first-child a:hover, .nav-row:first-child a.active { color: rgba(255,255,255,1); }
.nav-row:first-child a:hover::after, .nav-row:first-child a.active::after { width: 100%; }

/* Row 2 — secondary, subtler */
.nav-row:nth-child(2) li + li { border-left: 1px solid rgba(158,158,144,.1); padding-left: 2rem; }
.nav-row:nth-child(2) a {
  font-size: .70rem; font-weight: 300; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,.50); transition: color .3s; position: relative;
  white-space: nowrap;
}
.nav-row:nth-child(2) a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: rgba(255,255,255,.3); transition: width .3s;
}
.nav-row:nth-child(2) a:hover, .nav-row:nth-child(2) a.active { color: rgba(255,255,255,.8); }
.nav-row:nth-child(2) a:hover::after, .nav-row:nth-child(2) a.active::after { width: 100%; }

/* USER ICON */
.nav-user {
  flex-shrink: 0; margin-left: 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  transition: border-color .3s;
  text-decoration: none;
}
.nav-user:hover { border-color: rgba(255,255,255,.6); }
.nav-user svg { width: 16px; height: 16px; fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.nav-user:hover svg { stroke: rgba(255,255,255,.9); }

/* Keep old .nav-links hidden (backward compat) */
.nav-links { list-style: none; display: none; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { display: block; width: 22px; height: 1px; background: rgba(255,255,255,.6); }

#mob-menu {
  display: none; position: fixed; inset: 82px 0 0; z-index: 299;
  flex-direction: column; align-items: center; justify-content: center; gap: 3rem;
  background: var(--navy);
}
#mob-menu.open { display: flex; }
#mob-menu a {
  font-family: var(--serif); font-size: 2.8rem; font-weight: 400;
  color: rgba(255,255,255,.85); text-decoration: none; transition: color .3s;
}
#mob-menu a:hover { color: #fff; }

/* ============================================================
   SECTIONS - INDEX PAGE
   ============================================================ */

/* HERO — Dark 3D */
#hero { display:grid; grid-template-columns:55% 45%; min-height:60vh; padding-top:82px; }
.hero-dark { background: linear-gradient(135deg, #0B1220 0%, #0F1A2E 50%, #0B1628 100%); position: relative; overflow: visible; }
.hero-dark::before { content:''; position:absolute; inset:0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); opacity:0.4; pointer-events:none; }
.hero-dark .hero-text { background:transparent; border-left:1px solid rgba(158,158,144,.15); padding:4rem 4vw; }
.hero-dark .hero-eyebrow { color: rgba(212,212,200,.6); }
.hero-dark .hero-h1 { color: #fff; }
.hero-dark .hero-h1 .silver { color: rgba(158,158,144,.5); }
.hero-dark .hero-rule { background: rgba(158,158,144,.4); }
.hero-dark .hero-body { color: rgba(255,255,255,.55); }
.hero-dark .hero-arc svg path { stroke: url(#arcGrad); }

.btn-light { display:inline-block; padding:.9rem 2.4rem; background:#fff; color:var(--navy); font-family:var(--sans); font-size:.52rem; letter-spacing:.35em; text-transform:uppercase; border:none; cursor:pointer; transition:all .35s; text-decoration:none; }
.btn-light:hover { background:rgba(255,255,255,.85); transform:translateY(-1px); }
.btn-outline-light { display:inline-block; padding:.9rem 2.4rem; background:transparent; color:rgba(255,255,255,.7); font-family:var(--sans); font-size:.52rem; letter-spacing:.35em; text-transform:uppercase; border:1px solid rgba(255,255,255,.25); cursor:pointer; transition:all .35s; text-decoration:none; }
.btn-outline-light:hover { border-color:rgba(255,255,255,.5); color:#fff; }

.hero-3d { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hero-3d-spotlight { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; height:80%; background:radial-gradient(ellipse at center, rgba(255,245,220,0.06) 0%, transparent 70%); pointer-events:none; z-index:0; }
.hero-3d-caption { position:absolute; bottom:16px; left:0; right:0; text-align:center; font-family:var(--sans); font-size:.55rem; letter-spacing:.25em; color:rgba(158,158,144,.45); z-index:2; }
#hero-3d { position:relative; z-index:1; flex:1; min-height:0; }

.hero-img { position:relative; overflow:hidden; background:var(--cream2); }
.hero-img .bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); animation:hZoom 14s ease-out forwards; }
@keyframes hZoom { to { transform:scale(1); } }
.hero-text { display:flex; flex-direction:column; justify-content:center; padding:4rem 5vw 4rem 4vw; background:var(--cream); }
.hero-eyebrow { font-size:.52rem; letter-spacing:.6em; text-transform:uppercase; color:var(--muted); margin-bottom:2rem; opacity:0; animation:aUp .9s .3s forwards; }
.hero-h1 { font-family:var(--serif); font-size:clamp(3.2rem,5.5vw,5.5rem); font-weight:500; line-height:1.08; margin-bottom:2rem; opacity:0; animation:aUp 1s .55s forwards; }
.hero-rule { width:36px; height:2px; background:var(--silver); margin-bottom:2rem; opacity:0; animation:aFade .8s .85s forwards; }
.hero-arc { margin-bottom:0.5rem; opacity:0; animation:aFade 1.2s .4s forwards; }
.hero-body { font-size:.82rem; line-height:1.95; color:var(--muted); max-width:360px; margin-bottom:3rem; opacity:0; animation:aUp .9s 1s forwards; }
.hero-cta { display:flex; gap:.8rem; flex-wrap:wrap; opacity:0; animation:aUp .9s 1.2s forwards; }

/* ABOUT / FEATURES SECTION */
.split-section { display:grid; grid-template-columns:55% 45%; min-height:20vh; border-top:2px solid var(--silver); }
.split-section.reverse { direction: rtl; }
.split-section.reverse > * { direction: ltr; }
.split-img { position:relative; overflow:hidden; background:var(--cream2); min-height:120px; }
.split-img img { width:100%; height:100%; object-fit:cover; }
.split-text { padding:4rem 4vw; border-left:2px solid var(--silver); display:flex; flex-direction:column; justify-content:center; }
.split-section.reverse .split-text { border-left:none; border-right:2px solid var(--silver); }

/* STATS */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; padding-top:3rem; border-top:1px solid rgba(158,158,144,.35); }
.stat-val { display:block; font-family:var(--serif); font-size:2.8rem; font-weight:500; color:var(--navy); margin-bottom:.3rem; }
.stat-label { font-size:.5rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }

/* WHY CHOOSE / FEATURES GRID */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.feature-item { padding:2rem 2rem; border-left:2px solid var(--silver); }
.feature-item:first-child { border-left:none; }
.feature-num { font-size:.48rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem; display:block; }
.feature-title { font-family:var(--serif); font-size:1.35rem; font-weight:400; color:var(--ink); margin-bottom:1rem; }
.feature-text { font-size:.78rem; line-height:1.85; color:var(--muted); }

/* QUOTE BANNER */
.quote-banner { background:var(--navy); padding:8rem 10vw; text-align:center; }
.quote-banner blockquote { font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.8rem); font-weight:400; font-style:italic; color:rgba(255,255,255,.82); line-height:1.55; max-width:820px; margin:0 auto; }
.quote-banner cite { display:block; margin-top:2rem; font-family:var(--sans); font-style:normal; font-size:.5rem; letter-spacing:.5em; text-transform:uppercase; color:rgba(255,255,255,.25); }

/* PROCESS / HOW WE WORK */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.p-item { padding:3rem 2.5rem; border-left:2px solid var(--silver); }
.p-item:first-child { border-left:none; padding-left:0; }
.p-num { font-size:.48rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem; display:block; }
.p-title { font-family:var(--serif); font-size:1.35rem; font-weight:400; color:var(--ink); margin-bottom:1rem; }
.p-text { font-size:.78rem; line-height:1.85; color:var(--muted); }

/* CONFIGURATOR INTRO */
.configurator-intro {
  background: var(--navy);
  padding: 5rem 5vw;
  text-align: center;
  border-top: 2px solid var(--silver);
}
.configurator-intro h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 500;
  color: rgba(255,255,255,.9);
  margin-bottom: 1rem;
}
.configurator-intro p {
  font-size: .84rem;
  line-height: 1.8;
  color: rgba(255,255,255,.45);
  max-width: 500px;
  margin: 0 auto 2rem;
}

/* CERTIFICATIONS */
.cert-row { display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap; padding:2.5rem 5vw; background:var(--cream2); border-top:2px solid var(--silver); }
.cert-row img { height:50px; opacity:.6; transition:opacity .3s; }
.cert-row img:hover { opacity:1; }

/* PORTFOLIO GRID */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.portfolio-grid img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  transition: transform .6s;
}
.portfolio-grid img:hover { transform: scale(1.03); }

/* ============================================================
   FOOTER
   ============================================================ */
#if-footer {
  background: var(--navy);
  padding: 5rem 5vw 2.5rem;
}
.ft-top-line {
  height: 1px;
  background: linear-gradient(to right, transparent, #707068, #D4D4C8, #707068, transparent);
  margin-bottom: 4rem;
}
.ft-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem; margin-bottom: 4rem; padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ft-logo-block { display: flex; flex-direction: column; }
.ft-logo-block .silver-line { width: 140px; }
.ft-logo {
  font-family: var(--sans); font-size: 1rem; font-weight: 400;
  letter-spacing: .55em; text-transform: uppercase;
  color: rgba(255,255,255,.88); display: block;
  margin: 5px 0;
}
.ft-brand-text { font-size: .74rem; line-height: 1.9; color: rgba(255,255,255,.3); max-width: 280px; margin-top: 1rem; }
.ft-col h4 { font-size: .48rem; letter-spacing: .5em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 1.5rem; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: .85rem; }
.ft-col ul a { font-size: .74rem; color: rgba(255,255,255,.4); text-decoration: none; transition: color .3s; }
.ft-col ul a:hover { color: rgba(255,255,255,.9); }
.ft-bottom { display: flex; align-items: center; justify-content: space-between; }
.ft-bottom p { font-size: .55rem; letter-spacing: .1em; color: rgba(255,255,255,.18); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  #hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-img { min-height: 20vh; }
  .hero-3d { min-height: 50vh; }
  .hero-dark .hero-text { border-left: none; border-bottom: 1px solid rgba(158,158,144,.15); }
  .hero-text { border-left: none; border-top: 2px solid var(--silver); }
  .split-section { grid-template-columns: 1fr; }
  .split-text { border-left: none !important; border-right: none !important; border-top: 2px solid var(--silver); }
  .split-img { min-height: 20vw; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 680px) {
  .nav-links  { display: none; }
  .nav-rows   { display: none; }
  .nav-user   { display: none; }
  .hamburger  { display: flex; }
  .sec        { padding: 5rem 6vw; }
  .hero-text  { padding: 4rem 6vw; }
  .stats-row  { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .features-grid .feature-item { border-left: none; border-top: 2px solid var(--silver); padding-left: 0; }
  .features-grid .feature-item:first-child { border-top: none; }
  .process-grid { grid-template-columns: 1fr; }
  .p-item { border-left: none; border-top: 2px solid var(--silver); padding-left: 0; }
  .p-item:first-child { border-top: none; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .ft-grid    { grid-template-columns: 1fr; gap: 2rem; }
  .ft-bottom  { flex-direction: column; gap: .8rem; text-align: center; }
}