/* Deechie Ventures LLC — Canonical Styles (v7)
   Institutional. Disciplined. Operator-led.
   Refinements applied:
   (1) Hero secondary actions as quiet text links
   (2) Hero best-fit module uses the same card system
   (3) Unified link styling across nav + .cta
   Plus: architectural hero grid/texture preserved
*/

:root{
  --navy:#0B1F36;
  --charcoal:#1E1E1E;
  --muted:#444;
  --bg:#FFFFFF;
  --grid:#E9EDF2;
  --gold:#B08A2E;

  --container:1120px;
  --radius:12px;

  --shadow:0 8px 22px rgba(11,31,54,.07);
  --shadow-hover:0 10px 26px rgba(11,31,54,.09);

  --ring:0 0 0 4px rgba(176,138,46,.18);

  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:140ms;
  --t-med:220ms;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--charcoal);
  background:var(--bg);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:8px;
}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px;
  width:auto; height:auto;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--grid);
  border-radius:10px;
  z-index:9999;
}

/* Layout */
.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--grid);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 0; /* tightened */
}

.brand{ display:flex; align-items:center; }
.brand-logo{ height:40px; width:auto; }

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:14px;
}

/* Unified link system */
.nav a,
.cta{
  color:var(--navy);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:6px;
  letter-spacing:.04em;
  transition:
    text-decoration-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.nav a:hover,
.cta:hover{
  text-decoration-color:var(--gold);
}

/* Nav button */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 14px;
  border-radius:999px;
  font-size:13px;
  border:1px solid rgba(11,31,54,.25);
  background:#fff;
  transition:
    background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    transform var(--t-fast) var(--ease);
}

.nav-btn{
  border:1px solid var(--navy);
  border-radius:0;
  font-weight:600;
  text-decoration:none;
  padding:9px 12px;
}
.nav-btn:hover{
  background:var(--navy);
  color:#fff;
}

/* ---------- Mobile Nav (CSS-only) ---------- */

.nav-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.hamburger{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--grid);
  border-radius:12px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.hamburger span{
  width:18px; height:2px;
  background:var(--navy);
  display:block;
  position:relative;
}
.hamburger span::before,
.hamburger span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px; height:2px;
  background:var(--navy);
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

.mobile-panel{
  display:none;
  border-top:1px solid var(--grid);
  background:#fff;
}
.mobile-panel .inner{
  padding:12px 0 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobile-panel a{
  padding:10px 12px;
  border:1px solid var(--grid);
  border-radius:12px;
  color:var(--navy);
}
.mobile-panel a.nav-btn{
  border:1px solid var(--navy);
  border-radius:0;
}

.nav-toggle:checked ~ .mobile-panel{ display:block; }

@media (max-width:860px){
  .nav{ display:none; }
  .hamburger{ display:flex; }
}

/* ---------- Typography ---------- */

h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, serif;
  color:var(--navy);
  margin:0 0 10px;
}

h1{
  font-size:52px;
  line-height:1.06;
  letter-spacing:-.02em;
}

.kicker{
  color:var(--navy);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 10px;
}

.lede{
  font-size:16px;
  color:var(--muted);
  max-width:54ch;
  margin:12px 0 20px;
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  padding:92px 0 58px;
  overflow:hidden;
}

/* Architectural grid (preserved) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.06;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:repeating-linear-gradient(
    135deg,
    rgba(11,31,54,.10) 0px,
    rgba(11,31,54,.10) 1px,
    transparent 1px,
    transparent 14px
  );
  opacity:.04;
  transform:rotate(2deg);
  pointer-events:none;
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:28px;
  align-items:start;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* Quiet hero text-links (refinement #1) */
.hero-cta{
  letter-spacing:.02em; /* slightly calmer than nav */
}

/* ---------- Cards ---------- */

.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:18px;
}

.card{
  background:#fff;
  border:1px solid var(--grid);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  transition:
    box-shadow var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

.card:hover{
  box-shadow:var(--shadow-hover);
  border-color:rgba(176,138,46,.20);
  transform:translateY(-2px);
}

.card h3{
  margin:0 0 6px;
  font-size:24px;
}

.card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.card-link{ margin-top:10px; }

/* Hero best-fit module uses same card system (refinement #2) */
.hero-card{
  padding:18px 18px 16px;
}
.hero-card .label{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 8px;
}
.hero-card ul{
  margin:0;
  padding:0 0 0 18px;
  color:var(--muted);
}
.hero-card li{ margin:8px 0; }

/* ---------- Sections ---------- */

.section{ padding:40px 0; }

.rule{
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(176,138,46,.75) 35%,
    rgba(176,138,46,.75) 65%,
    transparent 100%
  );
  opacity:.28;
  margin:10px 0 0;
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}

.note{
  border-left:2px solid rgba(176,138,46,.55);
  padding:10px 0 10px 12px;
  color:var(--muted);
}

/* ---------- Buttons ---------- */

.btn.primary{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}

.btn.primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

/* ---------- Footer ---------- */

.site-footer{
  border-top:1px solid var(--grid);
  padding:26px 0;
  color:var(--muted);
  font-size:13px;
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* ---------- Forms (used on contact page) ---------- */

.form{ display:grid; gap:12px; }
.field{ display:grid; gap:6px; }

label{ font-size:13px; color:var(--navy); }

input, textarea{
  padding:12px 12px;
  border:1px solid var(--grid);
  border-radius:12px;
  font:inherit;
  transition:border-color var(--t-fast) var(--ease);
}

input:focus, textarea:focus{
  border-color:rgba(176,138,46,.55);
}

textarea{ min-height:130px; resize:vertical; }

/* ---------- Responsive ---------- */

@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  h1{ font-size:44px; }
  .cards{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .hero{ padding:74px 0 44px; }
  h1{ font-size:40px; }
}