:root{ --brand-gold: #D4AF37; /* replace if you'd like a different gold */ 
  --text-dark: #111111;
  --muted: #6b6b6b;
  --card-shadow: 0 6px 18px rgba(0,0,0,0.08);
  --container-max: 1100px;
  --radius: 8px;
  --focus-ring: 3px solid rgba(212,175,55,0.18);
  }
  
  /* Base */ 
  *{
    box-sizing:border-box;
  } 
  
  html {
    scroll-behavior: smooth;
  } 
  
  body { 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin:0;
    color:var(--text-dark);
    background: #fff;
    line-height:1.6; 
    -webkit-font-smoothing:antialiased; 
  } 
  
  a { color:inherit;} 
  
  img {
    max-width:100%;
    height:auto;
    display:block;
    border-radius:6px;
  } 
  
  /* Layout container */ 
  .container { 
    max-width: var(--container-max); 
    margin: 0 auto; 
    padding: 24px; 
  } 
  
  .container inner {
    display:flex;
    align-items:center;
    gap:16px;
  }

  /* Header / Sticky */ 
  header.site-header { 
    width: 100%;
    padding: 16px 0; 
    background-color: rgba(255,255,255,0.9); 
    border-radius: 10px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05 );
    transition: all 220ms ease; 
    margin: 12px; 
    text-align: center;
  } 
  
  .site-header.inner { 
    display:flex; 
    align-items:center; 
    gap:20px; 
    padding: 16px; 
  } 
  
  .logo { 
    max-width: 220px; 
    width: auto; 
    transition: max-width 220ms ease; 
  } 
 
  
  .brand-slogan { 
    flex:1; 
    text-align:center; 
    font-weight:600; 
    color:var(--muted); 
    font-size:20px; 
  } 
  
  /* Nav (anchor links for one-page) */ 
  nav.topnav { 
    display:flex; 
    gap:14px; 
    align-items:center; 
    justify-content:center; 
    margin-top:8px; 
    flex-wrap:wrap; 
  } 
  
  nav.topnav a { 
    padding:8px 12px; 
    border-radius:6px; 
    text-decoration:none; 
    color:var(--text-dark); 
    font-weight:600; 
    font-size:16px; 
    transition: background 160ms, color 160ms; 
  } 
  
  nav.topnav a:hover, nav.topnav a:focus { 
    background: rgba(212,175,55,0.12); 
    outline: none; 
  } 
  
  /* Hero-like / Intro sections */ 
  main { 
    padding: 18px 0 60px; 
  } 
  
  section.card { 
    background:#fff; 
    padding:22px; 
    border-radius: var(--radius); 
    box-shadow: var(--card-shadow); 
    margin-bottom:20px; 
  } 
  
  h1,h2 { 
    color:var(--text-dark); 
    margin:0 0 12px 0; 
    line-height:1.15; 
  } 
  
  h1 {
    font-size:28px;
  } 
  
  h2 {
    font-size:20px;
  } 
  
  p.lead { 
    color:var(--muted); 
    margin:0 0 12px 0; 
  } 
  
  /* Features split */ 
  .features { 
    display:flex; 
    flex-direction:column; 
    gap:18px; 
    align-items:stretch; 
  } 
  
  .feature-row { 
    display:flex; 
    flex-direction:column; 
    gap:16px; 
    align-items:center; 
  } 
  
  .feature-row .text { 
    max-width: 680px; 
  } 
  
  .feature-list { 
    padding-left:1.25rem; 
    margin: 8px 0; 
  } 
  
  /* Reverse modifier */ 
  .feature-row.reverse { 
    flex-direction:column-reverse; 
  } 
  
  /* Contact form */ 
  form.contact-form { 
    max-width:900px; 
    margin: 0 auto; 
    display:grid; 
    gap:12px; 
  } 
  
  .form-grid { 
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap:12px; 
  } 
  
  label {
    font-weight:600;
    font-size:13px;
    color:var(--muted)
  } 
  
  input[type="text"], input[type="email"], input[type="tel"], textarea { 
    width:100%; 
    padding:10px 12px; 
    border:1px solid #ddd; 
    border-radius:8px; 
    font-size:15px; 
  } 
  
  textarea {
    min-height:110px;
    resize:vertical;
  } 
  
  input:focus, textarea:focus {
    box-shadow: var(--focus-ring); 
    border-color: rgba(0,0,0,0.12); 
    outline: none;
  } 
  
  button.cta { 
    background:var(--brand-gold); 
    color:#000; 
    border:none; 
    padding:10px 16px; 
    font-weight:700; 
    border-radius:10px; 
    cursor:pointer; 
    box-shadow: 0 6px 18px rgba(212,175,55,0.12); 
    transition: transform 140ms ease, box-shadow 140ms; 
    justify-self:start; 
  } 
  
  button.cta:hover { 
    transform: translateY(-2px); 
    box-shadow:0 12px 28px rgba(0,0,0,0.08); 
  } 
  
  /* Floating call/contact button */ 
  .floating-contact { 
    position: fixed; 
    right: 18px; 
    bottom: 18px; 
    z-index:60; 
    display:flex; 
    gap:10px; 
    align-items:center; 
    pointer-events:auto; 
  } 
  
  .floating-contact .btn { 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    padding:12px 14px; 
    border-radius:999px; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.12); 
    background: var(--brand-gold); 
    color: #000; 
    font-weight:700; 
    text-decoration:none; 
  } 
  
  .floating-contact .btn.secondary { 
    background:#fff; 
    color:var(--text-dark); 
    border:1px solid #eee; 
  } 
  
  /* Footer */ 
  footer.site-footer { 
    margin:20px 12px 60px; 
    padding:20px; 
    background:#fff; 
    border-radius:10px; 
    box-shadow:var(--card-shadow); 
    text-align:center; 
  } 
  
  footer a {
    color:var(--brand-gold);
    font-weight:600;
  } 
  
  /* Small utilities */ 
  .muted {
    color:var(--muted);
  } 
  
  .small {
    font-size:13px;
  } 
  
  .hr {
    height:1px;
    background:#f0f0f0;
    margin:18px 0;
    border-radius:2px;
  } 
  
  /* Fade-in animation for sections */ 
  .reveal {
    opacity:0; 
    transform: translateY(18px); 
    transition: opacity 520ms ease, transform 520ms ease;
  } 
  
  .reveal.visible {
    opacity:1; 
    transform:none;
  } 
  
  /* Responsive rules */ 
  @media (min-width:768px) { 
    .feature-row { 
      flex-direction:row; 
      align-items:center; 
      gap:28px; 
    } 
    
    .feature-row.reverse {
      flex-direction:row-reverse;
    } 
    
    .feature-row .media, .feature-row .text  {
      flex:1;
    } 
 
    .form-grid {
      grid-template-columns: 1fr 1fr;
    } 
  } 
  
  @media (max-width:767px){ 
    .container {
      padding:16px;
    } 
    
    .logo {
      max-width:170px;
    } 
    
    .brand-slogan {
      font-size:14px;
    } 
    
    .feature-row .media {
      flex:1;
    }

    .form-grid {
      grid-template-columns:1fr;
    } 

    nav.topnav {
      gap:8px;
    } 


/* Media image slightly smaller between 468px-767px */
  @media (max-width: 767px) and (min-width: 468px){
  .feature-row .media img { 
    max-width: 80%; 
    margin: 0 auto; 
    display: block; }
  }
}