/* ============================================================
   Alder & Ash — Proposal Template · style.css
   ------------------------------------------------------------
   You should NOT need to edit this file to customize a proposal.
   All per-property content lives in  script.js  (the CONFIG block).
   This file only holds the frozen visual design: brand colors,
   fonts, spacing, shadows, and responsive rules.
   ============================================================ */

/* ---------- Webfonts (self-hosted, offline-safe) ---------- */
@font-face { font-family:"Mill Goudy"; src:url("assets/fonts/MillGoudy-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Mill Goudy"; src:url("assets/fonts/MillGoudy-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Arboria"; src:url("assets/fonts/Arboria-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Arboria"; src:url("assets/fonts/Arboria-Book.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Arboria"; src:url("assets/fonts/Arboria-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Arboria"; src:url("assets/fonts/Arboria-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Roc Grotesk"; src:url("assets/fonts/RocGrotesk-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Roc Grotesk"; src:url("assets/fonts/RocGrotesk-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Roc Grotesk"; src:url("assets/fonts/RocGrotesk-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Roc Grotesk Wide"; src:url("assets/fonts/RocGrotesk-WideMedium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }

/* ---------- Brand tokens ---------- */
:root {
  /* Brand inks */
  --aa-charcoal: #231f20;
  --aa-navy:     #3e4450;
  --aa-forest:   #464941;
  --aa-bark:     #928983;
  --aa-cream:    #ebe8e1;

  /* Forest ramp */
  --aa-forest-900: #2e302b;
  --aa-forest-700: #3c3f37;
  --aa-forest-600: #464941;
  --aa-forest-500: #565a50;
  --aa-forest-300: #8f9288;
  --aa-forest-100: #e0e2dc;
  --aa-forest-050: #edeeea;

  /* Navy ramp */
  --aa-navy-700: #2c313b;
  --aa-navy-600: #3e4450;
  --aa-navy-400: #6b7280;
  --aa-navy-100: #dde0e4;

  /* Bark ramp */
  --aa-bark-700: #6f665f;
  --aa-bark-600: #847b74;
  --aa-bark-500: #928983;
  --aa-bark-300: #b7afa9;
  --aa-bark-200: #d0cac3;
  --aa-bark-100: #e3ded7;

  /* Warm neutrals */
  --aa-ink:      #231f20;
  --aa-white:    #ffffff;
  --aa-paper:    #f6f4ef;
  --aa-linen:    #efece4;
  --aa-cream-2:  #ebe8e1;
  --aa-sand:     #ddd8cd;
  --aa-mist:     #c9c4bb;

  /* Support accents */
  --aa-gold:     #b08d57;
  --aa-clay:     #a86f54;

  /* Type families */
  --font-serif:  "Mill Goudy", "Cormorant Garamond", Georgia, serif;
  --font-sans:   "Arboria", "Questrial", "Helvetica Neue", Arial, sans-serif;
  --font-label:  "Roc Grotesk", "Arboria", "Helvetica Neue", Arial, sans-serif;
  --font-label-wide: "Roc Grotesk Wide", "Roc Grotesk", sans-serif;

  /* Text roles */
  --text-strong:   var(--aa-charcoal);
  --text-body:     #34322f;
  --text-muted:    var(--aa-bark-700);
  --text-faint:    var(--aa-bark-500);
  --text-on-dark:  var(--aa-cream);
  --text-on-dark-muted: #b7bcb4;

  /* Borders */
  --border-hairline: rgba(35, 31, 32, 0.12);
  --border-soft:     var(--aa-sand);
  --border-strong:   var(--aa-forest-600);
  --border-on-dark:  rgba(235, 232, 225, 0.22);
  --focus-ring: rgba(70, 73, 65, 0.45);

  /* Radii */
  --radius-none: 0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(32, 24, 32, 0.05);
  --shadow-sm: 0 2px 8px rgba(32, 24, 32, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(32, 24, 32, 0.18);
  --shadow-lg: 0 28px 60px -24px rgba(32, 24, 32, 0.28);
  --shadow-inset: inset 0 0 0 1px rgba(32, 24, 32, 0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Resets ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--aa-cream-2);
  color: var(--aa-charcoal);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; }
::selection { background: var(--aa-forest); color: var(--aa-cream); }

/* ---------- Motion / reveal-on-scroll ---------- */
@keyframes aaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .aa-hero-bg { transform: none !important; }
}

/* ---------- Interactive affordances ---------- */
.aa-clickable { cursor: pointer; }
.aa-enh-card { transition: border-color .2s, background .2s, box-shadow .2s; }
.aa-enh-card:hover { box-shadow: var(--shadow-sm); }
.aa-cta:hover { transform: translateY(-2px); }
.aa-rcta:hover { background: var(--aa-forest) !important; color: var(--aa-cream) !important; }
.aa-locked { opacity: 0.55; pointer-events: none; }
textarea:focus, .aa-focusable:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---------- Responsive (matches the original design) ---------- */
@media (max-width: 1000px){ .r-topnav-links{ display:none !important; } }
@media (max-width: 940px){
  .r-split{ grid-template-columns:1fr !important; gap:40px !important; }
  .r-grid-3{ grid-template-columns:1fr 1fr !important; }
  .r-grid-4{ grid-template-columns:1fr 1fr !important; }
  .r-storyrow{ grid-template-columns:1fr !important; }
  .r-featured{ grid-template-columns:1fr !important; }
  .r-enhrow{ grid-template-columns:1fr 1fr !important; }
  .r-grid-2p{ grid-template-columns:1fr !important; }
}
@media (max-width: 900px){ .r-media4{ grid-template-columns:1fr 1fr !important; } }
@media (max-width: 768px){
  .r-tl-line{ left:7px !important; transform:none !important; }
  .r-tlrow{ grid-template-columns:16px 1fr !important; }
  .r-tl-dot{ grid-column:1 !important; justify-content:flex-start !important; }
  .r-tl-content{ grid-column:2 !important; text-align:left !important; padding:0 0 0 clamp(16px,4vw,24px) !important; }
  .r-tl-content p{ margin-left:0 !important; }
  .r-sumrow{ grid-template-columns:1fr !important; gap:10px !important; }
}
@media (max-width: 600px){
  .r-grid-3,.r-grid-4,.r-enhrow{ grid-template-columns:1fr !important; }
  .r-collrow{ grid-template-columns:1fr !important; }
  .r-received-tl{ grid-template-columns:1fr 1fr !important; }
}
@media print {
  #aa-stage-controls { display: none !important; }
}
@media (max-width: 600px){
  .aa-drow{ grid-template-columns:1fr !important; gap:5px !important; }
}
@media (max-width: 760px){
  .r-support{ grid-template-columns:1fr !important; gap:26px !important; }
  .r-support-contact{ border-left:0 !important; padding-left:0 !important; padding-top:22px !important; border-top:1px solid var(--border-hairline); }
  .r-ddpts{ grid-template-columns:1fr !important; }
}