/* Radiant Landscape Lighting — shared base + responsive layer.
   Desktop rendering matches the Claude Design mockups exactly;
   the media queries below only reflow layout on smaller screens. */

*{box-sizing:border-box}
body{margin:0;background:#121110;color:#f3efe8;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:#f5c061}
a:hover{color:#ffd98a}
img{display:block;max-width:100%}
@keyframes rfu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rglow{0%,100%{opacity:.55}50%{opacity:.95}}

/* ===== Tablet / small-desktop ===== */
@media (max-width:900px){
  header.site-nav{padding:16px 20px !important;flex-wrap:wrap;gap:14px 22px;justify-content:center}
  header.site-nav nav{gap:18px !important;flex-wrap:wrap;justify-content:center}
  section,footer{padding-left:22px !important;padding-right:22px !important}
  .grid-2,.grid-3,.grid-4,.hero-split,.contact-grid{grid-template-columns:1fr !important;gap:28px !important}
  .hero-split{min-height:0 !important}
  .hero-media{min-height:300px}
  .hero-split h1{font-size:46px !important}
  h1{font-size:44px !important}
  .cta-row{flex-direction:column;align-items:flex-start !important}
  .cta-row .cta-right{text-align:left !important}
  .portfolio-grid{grid-template-columns:1fr 1fr !important;grid-auto-rows:180px !important}
  .portfolio-grid > *{grid-column:auto !important;grid-row:auto !important}
  footer.site-footer{flex-direction:column;gap:20px}
  footer.site-footer .foot-right{text-align:left !important}
  .service-area-row{flex-direction:column;align-items:flex-start !important}
}

/* ===== Phone ===== */
@media (max-width:560px){
  .grid-3,.grid-4,.portfolio-grid,.form-names{grid-template-columns:1fr !important}
  .hero-split h1,h1{font-size:34px !important}
  section{padding-top:48px !important;padding-bottom:48px !important}
  header.site-nav .brand-sub{display:none}
  .intro-statement{font-size:23px !important}
  .cta-row h2{font-size:30px !important}
}

/* ============================================================
   Learn / guides pages (standalone articles, not in main nav)
   ============================================================ */
.learn-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;border-bottom:1px solid rgba(245,192,97,.14);position:sticky;top:0;z-index:20;background:rgba(18,17,16,.9);backdrop-filter:blur(10px)}
.learn-nav a.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.learn-nav .brand-name{font:700 19px/1 'Space Grotesk',sans-serif;letter-spacing:.15em;color:#f3efe8}
.learn-nav .nav-cta{padding:9px 17px;background:#f5c061;color:#1a1410;border-radius:999px;font:600 14px 'Hanken Grotesk',sans-serif;text-decoration:none}
main.learn{max-width:760px;margin:0 auto;padding:56px 24px 24px}
.learn .eyebrow{font:500 12px/1 ui-monospace,monospace;letter-spacing:.3em;text-transform:uppercase;color:#f5c061;margin-bottom:20px}
.learn h1{font:600 42px/1.08 'Space Grotesk',sans-serif;letter-spacing:-.02em;margin:0 0 16px}
.learn .byline{font-size:14px;color:#a8a097;margin:0 0 30px;padding-bottom:24px;border-bottom:1px solid rgba(245,192,97,.12)}
.learn .qa{background:#1b1815;border:1px solid rgba(245,192,97,.22);border-left:3px solid #f5c061;border-radius:10px;padding:22px 24px;margin:0 0 34px}
.learn .qa p{margin:0;font-size:17px;line-height:1.55;color:#f3efe8}
.learn h2{font:600 26px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.01em;margin:38px 0 14px}
.learn p{font-size:16.5px;line-height:1.7;color:#cfc8bd;margin:0 0 16px}
.learn ul{margin:0 0 16px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.learn ul li{display:flex;gap:11px;font-size:16px;line-height:1.6;color:#d8d1c6}
.learn ul li::before{content:"✦";color:#f5c061;flex:none}
.learn .cta-inline{margin:30px 0;padding:22px 24px;background:linear-gradient(135deg,#241d14,#1a1511);border:1px solid rgba(245,192,97,.22);border-radius:12px}
.learn .cta-inline p{margin:0 0 14px;color:#f3efe8;font-size:16px}
.learn .btn-gold{display:inline-block;padding:13px 24px;background:#f5c061;color:#1a1410;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;margin-right:10px}
.learn .btn-ghost{display:inline-block;padding:13px 24px;border:1px solid rgba(245,192,97,.4);color:#f3efe8;border-radius:999px;font-weight:500;font-size:15px;text-decoration:none}
.learn .faq{margin:44px 0 0}
.learn .faq h2{margin-bottom:20px}
.learn .faq-item{background:#1b1815;border:1px solid rgba(245,192,97,.14);border-radius:10px;padding:22px 24px;margin-bottom:14px}
.learn .faq-item h3{font:600 17px/1.3 'Space Grotesk',sans-serif;margin:0 0 8px;color:#f3efe8}
.learn .faq-item p{margin:0;font-size:15.5px;color:#b4aca1}
.learn .related{margin:46px 0 0;padding-top:28px;border-top:1px solid rgba(245,192,97,.12)}
.learn .related h2{font:600 13px/1 ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:#a8a097;margin:0 0 16px}
.learn .related a{display:block;padding:6px 0;font-size:15.5px;text-decoration:none}
.learn .cta-final{margin:46px 0 10px;padding:36px 30px;border-radius:14px;background:linear-gradient(135deg,#241d14,#1a1511);border:1px solid rgba(245,192,97,.22);text-align:center}
.learn .cta-final h2{font:600 28px/1.1 'Space Grotesk',sans-serif;margin:0 0 10px}
.learn .cta-final p{margin:0 0 22px;color:#cfc8bd}
@media (max-width:560px){
  .learn-nav{padding:14px 20px}
  main.learn{padding:36px 20px 16px}
  .learn h1{font-size:31px}
}