/* ==========================================================================
   Danielewski Estate LLC
   Brand navy #132651 sourced from the ZenBusiness logo artwork.
   ========================================================================== */

:root{
  --navy:        #132651;
  --navy-deep:   #0C1A38;
  --navy-soft:   #1E3566;
  --brass:       #B08D57;
  --brass-light: #C9A971;
  --sand:        #F6F3EE;
  --paper:       #FFFFFF;
  --ink:         #16203A;
  --slate:       #55607A;
  --line:        #E3E0DA;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(19,38,81,.06), 0 4px 14px rgba(19,38,81,.05);
  --shadow-md: 0 2px 6px rgba(19,38,81,.07), 0 16px 40px rgba(19,38,81,.09);
  --header-h: 78px;
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  color:var(--slate);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
h1,h2,h3{font-family:var(--font-display); color:var(--navy); font-weight:500; letter-spacing:-.01em; margin:0 0 .5em}
h1{font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.06; letter-spacing:-.02em}
h2{font-size:clamp(1.9rem, 3.4vw, 2.75rem); line-height:1.16}
h3{font-size:1.2rem; line-height:1.3}
p{margin:0 0 1.1em}
a{color:var(--navy); text-decoration-color:rgba(19,38,81,.28); text-underline-offset:3px}
a:hover{text-decoration-color:var(--brass)}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-size:.9rem; font-weight:600;
  letter-spacing:.055em; text-transform:uppercase; text-decoration:none;
  padding:.78rem 1.5rem; border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn-lg{padding:1rem 1.9rem; font-size:.86rem}
.btn-block{width:100%}
.btn-accent{background:var(--brass); color:#fff; border-color:var(--brass)}
.btn-accent:hover{background:var(--brass-light); border-color:var(--brass-light); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn-outline-light:hover{background:rgba(255,255,255,.1); border-color:#fff}

/* ── header ────────────────────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(19,38,81,.05)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:1.5rem}
.brand{display:block; flex:0 0 auto}
.brand img{width:auto; height:36px}

.primary-nav{display:flex; align-items:center; gap:2rem}
.primary-nav a{
  font-size:.9rem; font-weight:500; color:var(--navy); text-decoration:none;
  letter-spacing:.01em; position:relative; padding:.25rem 0;
}
.primary-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brass); transition:right .25s ease;
}
.primary-nav a:not(.btn):hover::after{right:0}

.nav-toggle{
  display:none; width:44px; height:44px; padding:11px 10px;
  background:none; border:0; cursor:pointer; flex-direction:column; justify-content:space-between;
}
.nav-toggle span{display:block; height:1.5px; background:var(--navy); transition:transform .25s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative; padding-top:var(--header-h); background:var(--navy-deep); color:#fff; overflow:hidden}
.hero-art{position:absolute; inset:0; z-index:0}
.hero-art svg{width:100%; height:100%}
.hero-inner{position:relative; z-index:1; padding-block:clamp(5rem, 12vw, 9.5rem) clamp(6rem, 14vw, 11rem); max-width:860px}

.eyebrow{
  font-size:.76rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-light); margin:0 0 1.4rem;
}
.hero h1{color:#fff; margin-bottom:1.5rem; max-width:14ch}
.hero-lede{font-size:clamp(1.05rem, 1.6vw, 1.22rem); color:rgba(255,255,255,.8); max-width:60ch; margin-bottom:2.4rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem}

.hero-stats{position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.13); background:rgba(12,26,56,.55)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.11)}
.stat{background:var(--navy-deep); padding:1.7rem 1.4rem; text-align:center}
.stat-n{display:block; font-family:var(--font-display); font-size:2rem; color:#fff; line-height:1.1}
.stat-l{display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.58); margin-top:.5rem}

/* ── sections ──────────────────────────────────────────────────────────── */
.section{padding-block:clamp(4.5rem, 9vw, 7.5rem)}
.section-alt{background:var(--sand)}
.section-eyebrow{
  font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1rem;
}
.section-eyebrow.light{color:var(--brass-light)}
.section-head{max-width:60ch; margin-bottom:3.2rem}
.section-lede{font-size:1.08rem; margin-bottom:0}

/* about */
.about-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem, 6vw, 5rem); align-items:center}
.about-copy h2{margin-bottom:1.2rem}
.about-art{margin:0}
.about-art svg{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-md)}

.check-list{margin-top:2rem; display:grid; gap:.85rem}
.check-list li{position:relative; padding-left:1.9rem; color:var(--ink); font-size:.98rem}
.check-list li::before{
  content:""; position:absolute; left:0; top:.55em; width:11px; height:6px;
  border-left:1.6px solid var(--brass); border-bottom:1.6px solid var(--brass);
  transform:rotate(-45deg);
}

/* services */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.1rem 1.9rem; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent}
.card-icon{display:block; width:42px; height:42px; color:var(--brass); margin-bottom:1.25rem}
.card-icon svg{width:100%; height:100%}
.card h3{margin-bottom:.6rem}
.card p{font-size:.96rem; margin:0}

/* portfolio */
.market-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem}
.market{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper);
  display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease;
}
.market:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.market-art{aspect-ratio:400/260; background:var(--navy)}
.market-art svg{width:100%; height:100%}
.market-body{padding:1.7rem 1.6rem 1.9rem}
.market-body h3{margin-bottom:.55rem}
.market-body p{font-size:.94rem; margin-bottom:0}

/* portal band */
.portal-band{background:var(--navy); color:#fff; padding-block:clamp(4rem, 8vw, 6.5rem); position:relative; overflow:hidden}
.portal-inner{display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center; position:relative; z-index:1}
.portal-band h2{color:#fff; max-width:18ch}
.portal-band p{color:rgba(255,255,255,.78); max-width:56ch}
.portal-band a{color:var(--brass-light)}
.portal-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin:2rem 0 1.4rem}
.portal-note{font-size:.88rem; color:rgba(255,255,255,.6); margin:0}
.portal-mark{width:clamp(110px, 14vw, 190px); opacity:.13}
/* logo-mark.svg is painted with currentColor, which an <img>-loaded SVG cannot
   inherit from the page. Invert to white instead. */
.portal-mark img{width:100%; height:auto; filter:brightness(0) invert(1)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem, 6vw, 5rem); align-items:start}
.contact-list{margin:2.4rem 0 0; display:grid; gap:1.35rem}
.contact-list div{border-top:1px solid var(--line); padding-top:1.1rem}
.contact-list dt{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:.35rem}
.contact-list dd{margin:0; font-size:.98rem}
.contact-list dd a{color:var(--navy); font-weight:500; text-decoration:none; border-bottom:1px solid var(--line); word-break:break-all}
.contact-list dd a:hover{border-bottom-color:var(--brass)}

.contact-form{background:var(--sand); border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem 2rem}
.contact-form h3{margin-bottom:1.5rem}
.field{margin-bottom:1.1rem}
.field label{display:block; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--slate); margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.96rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.72rem .85rem; transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(176,141,87,.16);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#B4462F}
.form-note{font-size:.8rem; color:var(--slate); text-align:center; margin:.9rem 0 0}

/* footer */
.site-footer{background:var(--navy-deep); color:rgba(255,255,255,.7); padding-block:3.5rem 2rem}
.footer-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem; padding-bottom:2.5rem}
.footer-logo{height:34px; width:auto; filter:brightness(0) invert(1); opacity:.92; margin-bottom:1.1rem}
.footer-brand p{font-size:.92rem; margin:0; color:rgba(255,255,255,.6)}
.footer-nav{display:flex; flex-wrap:wrap; gap:1.6rem; align-items:flex-start}
.footer-nav a{font-size:.9rem; color:rgba(255,255,255,.75); text-decoration:none}
.footer-nav a:hover{color:#fff}
.footer-legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(255,255,255,.12); padding-top:1.6rem;
}
.footer-legal p{font-size:.8rem; color:rgba(255,255,255,.45); margin:0}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 980px){
  .card-grid,.market-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid,.contact-grid,.portal-inner{grid-template-columns:1fr}
  .about-art{order:-1; max-width:420px}
  .portal-mark{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 760px){
  body{font-size:16px}
  .nav-toggle{display:flex}
  .primary-nav{
    position:absolute; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    padding:.5rem 24px 1.5rem;
    display:none;
  }
  .primary-nav.is-open{display:flex}
  .primary-nav a{padding:.95rem 0; border-bottom:1px solid var(--line)}
  .primary-nav a:not(.btn)::after{display:none}
  .nav-cta{margin-top:1.1rem; border-bottom:0}
  .card-grid,.market-grid{grid-template-columns:1fr}
  .hero-actions .btn,.portal-actions .btn{flex:1 1 100%}
  .contact-form{padding:1.8rem 1.4rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}