/* =========================================================
   Fowlers Place — Site CSS
   All custom styling shared across every page.
   Tailwind utility classes still drive layout.
   ========================================================= */

:root{
  --ink-900:#0A1628;
  --ink-800:#101E33;
  --ink-700:#1B2838;
  --ink-600:#2C3E50;
  --ink-500:#4A5A6E;
  --ink-400:#7B8898;
  --bone-50:#FAF9F6;
  --bone-100:#F4F2EC;
  --bone-200:#E8E5DC;
  --champagne-400:#D8BE7B;
  --champagne-500:#C9A961;
  --champagne-600:#A88845;
}

html { scroll-behavior:smooth; }
body{
  font-family:'Inter','Helvetica Neue',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bone-50);
  color:var(--ink-900);
}
.font-display { font-family:'Playfair Display',Georgia,serif; }
.font-tight   { font-family:'Inter Tight','Inter',sans-serif; }

/* ---------- Hairlines ---------- */
.hairline{ height:1px; background:linear-gradient(90deg,transparent,rgba(10,22,40,.18),transparent); }
.hairline-light{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); }

/* ---------- Eyebrow label ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--champagne-600); font-weight:500;
}
.eyebrow-light{ color:var(--champagne-400); }

/* ---------- Nav links ---------- */
.nav-link{ position:relative; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:currentColor; transition:width .35s ease;
}
.nav-link:hover::after,
.nav-link[data-active="true"]::after{ width:100%; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1rem 1.75rem; min-width:240px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:all .35s ease;
}
.btn svg{ transition:transform .3s ease; }
.btn:hover svg{ transform:translateX(4px); }

.btn-solid       { background:var(--bone-50); color:var(--ink-900); }
.btn-solid:hover { background:var(--champagne-500); }
.btn-dark        { background:var(--ink-900); color:var(--bone-50); }
.btn-dark:hover  { background:var(--ink-700); }
.btn-ghost       { background:transparent; color:var(--ink-900); border:1px solid rgba(10,22,40,.2); }
.btn-ghost:hover { background:var(--ink-900); color:var(--bone-50); border-color:var(--ink-900); }
.btn-ghost-light { background:transparent; color:var(--bone-50); border:1px solid rgba(255,255,255,.35); }
.btn-ghost-light:hover { background:var(--bone-50); color:var(--ink-900); border-color:var(--bone-50); }

/* ---------- Inline link with arrow ---------- */
.link-arrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  border-bottom:1px solid currentColor; padding-bottom:.25rem;
  transition:gap .3s ease, color .3s ease, border-color .3s ease;
}
.link-arrow:hover{ gap:1.25rem; }
.link-arrow.on-dark:hover{ color:var(--champagne-400); border-color:var(--champagne-400); }

/* ---------- Focus / hover card ---------- */
.focus-card{ transition:transform .5s ease, border-color .5s ease, background .5s ease; }
.focus-card:hover{ transform:translateY(-4px); border-color:rgba(201,169,97,.5); }

/* ---------- Editorial number ---------- */
.stat-number{
  font-family:'Playfair Display',serif;
  font-weight:500; line-height:1;
}

/* ---------- Grain texture (Hero & dark sections) ---------- */
.grain{ position:relative; }
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:3px 3px; mix-blend-mode:overlay;
}

/* ---------- Fade-in on load ---------- */
.fade-up{ opacity:0; transform:translateY(12px); animation:fadeUp .9s ease forwards; }
.delay-1{ animation-delay:.15s; }
.delay-2{ animation-delay:.30s; }
.delay-3{ animation-delay:.45s; }
.delay-4{ animation-delay:.60s; }
@keyframes fadeUp { to{ opacity:1; transform:translateY(0); } }

/* ---------- Insight placeholder gradients (until real imagery is added) ---------- */
.ph-1{ background:linear-gradient(135deg,#1B2838 0%,#0A1628 100%); }
.ph-2{ background:linear-gradient(135deg,#2C3E50 0%,#1B2838 100%); }
.ph-3{ background:linear-gradient(135deg,#0A1628 0%,#2C3E50 100%); }
.ph-4{ background:linear-gradient(160deg,#1B2838 0%,#0A1628 60%,#2C3E50 100%); }
.ph-5{ background:linear-gradient(120deg,#0A1628 10%,#1B2838 90%); }
.ph-6{ background:linear-gradient(200deg,#2C3E50 0%,#0A1628 80%); }

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed; inset:0; z-index:60;
  background:var(--ink-900); color:var(--bone-50);
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.6,.05,.2,1);
  display:flex; flex-direction:column;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:'Playfair Display',serif; font-size:34px; line-height:1.1; padding:.5rem 0; }
.mobile-menu a:hover{ color:var(--champagne-400); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-400); font-weight:500;
}
.field input, .field select, .field textarea{
  background:transparent; border:none; border-bottom:1px solid rgba(10,22,40,.18);
  padding:.65rem 0; font-size:15px; color:var(--ink-900); outline:none;
  transition:border-color .3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--champagne-500);
}
.field textarea{ min-height:120px; resize:vertical; }
.field-dark label{ color:rgba(250,249,246,.5); }
.field-dark input, .field-dark select, .field-dark textarea{
  color:var(--bone-50); border-color:rgba(250,249,246,.22);
}
.field-dark input:focus, .field-dark select:focus, .field-dark textarea:focus{
  border-color:var(--champagne-400);
}
.field-dark input::placeholder, .field-dark textarea::placeholder{ color:rgba(250,249,246,.35); }

/* ---------- Dropzone ---------- */
.dropzone{
  border:1px dashed rgba(250,249,246,.35);
  padding:2.5rem 1.5rem; text-align:center;
  transition:border-color .3s ease, background .3s ease;
  cursor:pointer;
}
.dropzone:hover, .dropzone.dragover{
  border-color:var(--champagne-400);
  background:rgba(201,169,97,.06);
}

/* ---------- Accordion (FAQ) ---------- */
.accordion details{
  border-top:1px solid rgba(10,22,40,.12);
}
.accordion details:last-of-type{ border-bottom:1px solid rgba(10,22,40,.12); }
.accordion summary{
  list-style:none; cursor:pointer;
  padding:1.75rem 0; display:flex; justify-content:space-between; align-items:flex-start; gap:2rem;
  font-family:'Playfair Display',serif; font-size:20px; line-height:1.3;
  transition:color .3s ease;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary:hover{ color:var(--champagne-600); }
.accordion summary .acc-icon{
  flex-shrink:0; width:24px; height:24px;
  position:relative; transition:transform .35s ease;
}
.accordion summary .acc-icon::before,
.accordion summary .acc-icon::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
}
.accordion summary .acc-icon::before{ width:14px; height:1px; transform:translate(-50%,-50%); }
.accordion summary .acc-icon::after{ width:1px; height:14px; transform:translate(-50%,-50%); transition:transform .35s ease; }
.accordion details[open] summary .acc-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.accordion .acc-body{
  padding:0 0 1.75rem 0; color:var(--ink-500);
  font-size:15px; line-height:1.7; max-width:60ch;
}

/* ---------- Process timeline ---------- */
.timeline{ position:relative; }
.timeline::before{
  content:""; position:absolute; left:14px; top:8px; bottom:8px; width:1px;
  background:rgba(10,22,40,.15);
}
.timeline .t-step{ position:relative; padding-left:60px; padding-bottom:2.5rem; }
.timeline .t-step::before{
  content:""; position:absolute; left:8px; top:8px; width:14px; height:14px;
  border-radius:50%; background:var(--bone-50);
  border:1px solid var(--champagne-500); box-shadow:0 0 0 4px var(--bone-50);
}
.timeline.on-dark::before{ background:rgba(250,249,246,.18); }
.timeline.on-dark .t-step::before{ background:var(--ink-900); box-shadow:0 0 0 4px var(--ink-900); }

/* ---------- Logo / Press band ---------- */
.press-mark{
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:18px; color:var(--ink-400);
  letter-spacing:.02em; text-align:center;
}

/* ---------- Sticky bottom CTA bar (mobile) ---------- */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:var(--ink-900); color:var(--bone-50);
  padding:.85rem 1rem;
  display:flex; gap:.75rem; justify-content:space-between; align-items:center;
  font-size:13px; letter-spacing:.08em;
  transform:translateY(100%); transition:transform .5s ease;
}
.sticky-cta.show{ transform:translateY(0); }
@media (min-width:768px){ .sticky-cta{ display:none; } }

/* ---------- Helpers ---------- */
.divider-y > * + *{ border-top:1px solid rgba(10,22,40,.12); }
.divider-y-light > * + *{ border-top:1px solid rgba(250,249,246,.12); }
.kbd-tag{
  display:inline-block; padding:.25rem .6rem;
  border:1px solid rgba(10,22,40,.18);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-500);
}
.kbd-tag.on-dark{ border-color:rgba(250,249,246,.22); color:rgba(250,249,246,.7); }

/* ---------- Map placeholder ---------- */
.map-canvas{
  background:
    linear-gradient(135deg, rgba(10,22,40,.92), rgba(27,40,56,.85)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px);
  color:var(--bone-50);
}

/* ---------- Print friendliness ---------- */
@media print {
  .site-header, .site-footer, .sticky-cta { display:none; }
}