/* ==========================================================================
   Bildr Studio — shared site styles
   Foundation tokens, shared nav + footer, buttons, reusable section pieces.
   ========================================================================== */

/* ---- Fonts (self-hosted Inter, the weights we actually use) ------------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/Inter_18pt-Light.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/Inter_18pt-Regular.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/Inter_18pt-Medium.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/Inter_18pt-SemiBold.ttf') format('truetype'); }

:root {
  /* brand palette */
  --navy:#1A2B4A; --charcoal:#2C3338; --amber:#C4813D;
  --light:#F0EFEB; --offwhite:#FAFAF8; --white:#FFFFFF;
  --navy-900:#12203A; --navy-800:#1A2B4A; --navy-700:#28395B; --navy-600:#3A4B6E;
  --navy-400:#8A9BB5; --navy-100:#E6EAF1;
  --amber-700:#A66A2C; --amber-600:#C4813D; --amber-300:#E4C39B; --amber-100:#F6ECDD;
  --stone-600:#5A5F66; --stone-500:#8A8D91; --stone-300:#C9C8C2; --stone-200:#E8E7E3; --stone-100:#F0EFEB;

  /* semantic */
  --bg:var(--offwhite); --bg-band:var(--light); --bg-card:var(--white); --bg-inverse:var(--navy-800);
  --fg1:var(--charcoal); --fg2:var(--stone-600); --fg3:var(--stone-500);
  --fg-inverse:var(--offwhite); --fg-inverse-2:var(--navy-400);
  --border:var(--stone-200); --border-strong:var(--stone-300);
  --accent:var(--amber-600); --accent-hover:var(--amber-700); --link:var(--amber-700);
  --success:#3F7D58;

  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type scale */
  --text-display:64px; --text-h1:48px; --text-h2:36px; --text-h3:26px; --text-h4:20px;
  --text-lead:20px; --text-body:17px; --text-small:15px; --text-caption:13px; --text-eyebrow:12px;

  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* radii */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;

  /* shadows */
  --shadow-xs:0 1px 2px rgba(26,43,74,.05);
  --shadow-sm:0 2px 8px rgba(26,43,74,.06);
  --shadow-md:0 8px 24px rgba(26,43,74,.08);
  --shadow-lg:0 20px 48px rgba(26,43,74,.10);

  /* motion */
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:360ms;

  /* layout */
  --container:1120px; --container-narrow:760px;
}

/* ---- Base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--fg1);
  font-size:var(--text-body); line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
img{max-width:100%; display:block}
h1,h2,h3,h4,h5,p{margin:0}
::selection{background:var(--amber-300); color:var(--navy-900)}

.container{max-width:var(--container); margin:0 auto; padding:0 28px}
.narrow{max-width:var(--container-narrow); margin-left:auto; margin-right:auto}
.center{text-align:center}

/* ---- Type helpers ------------------------------------------------------- */
.eyebrow{
  display:inline-block; font-size:var(--text-eyebrow); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.mark{
  position:relative; white-space:nowrap;
  background-image:linear-gradient(var(--amber-300),var(--amber-300));
  background-repeat:no-repeat; background-size:100% .26em; background-position:0 88%;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:500;
  border-radius:var(--radius-md); padding:13px 24px; border:1px solid transparent;
  cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
  border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn svg{flex:none}
.btn-primary{background:var(--amber-600); color:var(--offwhite); box-shadow:0 1px 2px rgba(26,43,74,.08)}
.btn-primary:hover{background:var(--amber-700); transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent; color:var(--navy-800); border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--navy-100); border-color:var(--navy-400)}
.btn-ghost{background:transparent; color:var(--link); padding:13px 6px}
.btn-ghost:hover .arr{transform:translateX(4px)}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn-lg{padding:16px 30px; font-size:16px}

/* link with arrow */
.tlink{
  display:inline-flex; align-items:center; gap:8px; color:var(--link); font-weight:500;
  font-size:16px; transition:gap var(--dur) var(--ease);
}
.tlink:hover{gap:12px}
.tlink:hover{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}

/* ---- Scroll progress bar ------------------------------------------------ */
.scrollbar{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:100;
  background:var(--amber-600);
}

/* ---- Header / nav ------------------------------------------------------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
header.site.scrolled{
  background:rgba(250,250,248,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--border);
}
.nav{display:flex; align-items:center; height:72px; gap:36px}
.brand{display:flex; align-items:baseline; gap:7px; line-height:1}
.brand .bd{font-size:25px; font-weight:600; letter-spacing:-.03em; color:var(--navy-800)}
.brand .bd b{color:var(--amber-600); font-weight:600}
.brand .st{font-size:12px; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--stone-500)}
.nav .links{display:flex; gap:30px; margin-left:14px}
.nav .links a{
  position:relative; font-size:15px; color:var(--fg2); padding:6px 0;
  transition:color var(--dur) var(--ease);
}
.nav .links a:hover{color:var(--fg1)}
.nav .links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--amber-600); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav .links a:hover::after{transform:scaleX(.4)}
.nav .links a.active{color:var(--fg1)}
.nav .links a.active::after{transform:scaleX(1)}
.nav .right{margin-left:auto; display:flex; align-items:center; gap:18px}

/* mobile menu */
.hamburger{
  display:none; width:44px; height:44px; border:1px solid var(--border-strong);
  background:rgba(255,255,255,.5); border-radius:var(--radius-md); cursor:pointer;
  align-items:center; justify-content:center; color:var(--navy-800);
}
.mobile-menu{
  display:none; position:fixed; inset:72px 0 auto 0; z-index:55;
  background:var(--offwhite); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-lg); padding:14px 28px 26px;
}
.mobile-menu.open{display:block; animation:menuDrop var(--dur) var(--ease)}
@keyframes menuDrop{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:translateY(0)}}
.mobile-menu a{display:block; font-size:17px; color:var(--fg1); padding:14px 0; border-bottom:1px solid var(--border)}
.mobile-menu a.active{color:var(--amber-700)}
.mobile-menu .btn{width:100%; justify-content:center; margin-top:18px}

/* ---- Sections ----------------------------------------------------------- */
.band{background:var(--bg-band)}
.navy{background:var(--navy-800); color:var(--fg-inverse)}
.sec{padding:var(--space-9) 0}
.sec-sm{padding:var(--space-8) 0}
.sec-head h2{font-size:var(--text-h2); font-weight:500; letter-spacing:-.02em; line-height:1.18; color:var(--navy-800); margin-top:14px}
.sec-head p{font-size:var(--text-lead); color:var(--fg2); line-height:1.55; margin-top:18px; max-width:620px}
.sec-head.center{margin-left:auto; margin-right:auto}
.sec-head.center p{margin-left:auto; margin-right:auto}

/* page header (below fixed nav) */
.page-head{padding:160px 0 24px}
.page-head h1{font-size:var(--text-h1); font-weight:500; letter-spacing:-.025em; line-height:1.08; color:var(--navy-800); margin-top:16px; max-width:760px}
.page-head p{font-size:var(--text-lead); color:var(--fg2); line-height:1.55; margin-top:20px; max-width:600px}

/* ---- Cards -------------------------------------------------------------- */
.card{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px}
.card-icn{
  width:46px; height:46px; border-radius:11px; background:var(--amber-100); color:var(--amber-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.card h3{font-size:20px; font-weight:500; color:var(--navy-800); margin-bottom:9px}
.card p{font-size:15px; color:var(--fg2); line-height:1.6}

/* ---- Browser frame mockup ---------------------------------------------- */
.browser{
  border-radius:var(--radius-lg); background:#fff; border:1px solid var(--border);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.browser .bar{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--offwhite)}
.browser .dot{width:11px; height:11px; border-radius:50%; background:var(--stone-300)}
.browser .url{margin-left:14px; font-size:12px; color:var(--fg3); background:var(--white); border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 16px}

/* ---- Footer ------------------------------------------------------------- */
footer.site{padding:80px 0 40px; background:var(--navy-800); color:var(--fg-inverse)}
.foot{display:flex; justify-content:space-between; gap:56px; flex-wrap:wrap}
.foot .brand .bd{color:var(--offwhite)}
.foot .brand .st{color:var(--navy-400)}
.foot .blurb{font-size:14px; color:var(--navy-400); max-width:240px; line-height:1.6; margin-top:18px}
.foot .cols{display:flex; gap:72px; flex-wrap:wrap}
.foot .col h5{font-size:12px; font-weight:500; color:var(--offwhite); margin-bottom:16px; text-transform:uppercase; letter-spacing:.12em}
.foot .col a{display:block; font-size:14px; color:var(--navy-400); margin-bottom:11px; transition:color var(--dur) var(--ease)}
.foot .col a:hover{color:var(--amber-300)}
.foot .socials{display:flex; gap:10px; margin-top:20px}
.foot .socials a{
  width:40px; height:40px; margin:0; border:1px solid var(--navy-600); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; color:var(--navy-400);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.foot .socials a:hover{color:var(--amber-300); border-color:var(--amber-300); transform:translateY(-2px)}
.foot-bottom{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--navy-600);
  font-size:13px; color:var(--navy-400); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.foot-bottom a:hover{color:var(--amber-300)}

/* ---- CTA band (navy card floated on the page bg, distinct from footer) -- */
.cta-band{background:var(--bg); padding:var(--space-9) 28px}
.cta-band .container{
  background:var(--navy-800); color:var(--fg-inverse); text-align:center;
  border-radius:var(--radius-xl); padding:78px 40px; box-shadow:var(--shadow-md);
}
.cta-band h2{font-size:42px; font-weight:500; letter-spacing:-.02em; line-height:1.12; color:var(--offwhite); max-width:680px; margin:0 auto}
.cta-band p{font-size:var(--text-lead); color:var(--navy-400); margin:18px auto 0; max-width:520px; line-height:1.55}
.cta-band .btn{margin-top:34px}

/* ---- Scroll reveal (fail-safe: visible by default, armed by JS) -------- */
.reveal{opacity:1; transform:none}
html.reveal-on .reveal{opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease)}
html.reveal-on .reveal.in{opacity:1; transform:none}
html.reveal-on .reveal[data-d="1"]{transition-delay:.08s}
html.reveal-on .reveal[data-d="2"]{transition-delay:.16s}
html.reveal-on .reveal[data-d="3"]{transition-delay:.24s}
html.reveal-on .reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html.reveal-on .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:860px){
  :root{--text-display:42px; --text-h1:36px; --text-h2:28px}
  .nav .links, .nav .right .btn, .nav .right .desk{display:none}
  .hamburger{display:flex}
  .page-head{padding:130px 0 16px}
  .cta-band{padding:var(--space-8) 18px}
  .cta-band .container{padding:48px 26px}
  .cta-band h2{font-size:30px}
  .foot{gap:40px}
  .foot .cols{gap:48px}
}