 :root{
    --marigold:#F5A623;
    --turmeric:#FFCB57;
    --terracotta:#E8641C;
    --terracotta-deep:#C94E12;
    --ink:#3B2A1D;
    --ink-soft:#6B5644;
    --cream:#FFFBF2;
    --card:#FFFFFF;
    --peach:#FFEFD9;
    --line:#F1DFC0;
    --radius:18px;
    --shadow: 0 10px 30px -12px rgba(201,78,18,0.25);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Mulish', sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.brand{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    color:var(--ink);
  }
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  img,svg{display:block; max-width:100%;}
  .container{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
  }
  section{padding:56px 0;}
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--terracotta-deep);
    background:var(--peach);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:14px;
  }
  h2{font-size:clamp(24px,4vw,34px); margin-bottom:12px;}
  .lead{color:var(--ink-soft); font-size:16px; max-width:620px;}

  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 22px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
    font-family:'Mulish',sans-serif;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-call{
    background:linear-gradient(135deg,var(--terracotta),var(--terracotta-deep));
    color:#fff;
    box-shadow:var(--shadow);
  }
  .btn-outline{
    background:transparent;
    border-color:var(--terracotta);
    color:var(--terracotta-deep);
  }
  .btn svg{width:18px; height:18px; flex-shrink:0;}

  /* Header */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,251,242,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
  }
  .brand{
    font-size:22px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .brand span.dot{
    width:10px; height:10px; border-radius:50%;
    background:var(--marigold);
    box-shadow:0 0 0 4px var(--peach);
  }
  nav.links{
    display:none;
    gap:28px;
    font-weight:700;
    font-size:15px;
  }
  nav.links a{
    position:relative;
    padding:4px 0;
  }
  nav.links a::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0%; height:2px;
    background:var(--terracotta);
    transition:width .2s ease;
  }
  nav.links a:hover::after{width:100%;}
  .header-actions{display:flex; align-items:center; gap:12px;}
  .menu-btn{
    display:inline-flex;
    background:none; border:none;
    padding:6px;
    cursor:pointer;
  }
  .menu-btn svg{width:26px; height:26px;}
  .mobile-menu{
    display:none;
    flex-direction:column;
    gap:2px;
    padding:8px 0 16px;
    border-top:1px solid var(--line);
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{
    padding:12px 4px;
    font-weight:700;
    border-bottom:1px solid var(--line);
  }

  /* Marigold garland divider - signature element */
  .garland{
    width:100%;
    height:26px;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .garland svg{width:100%; height:100%;}

  /* Banner */
  .top-banner{
    width:100%;
    line-height:0;
    background:#0a1a4d;
  }
  .top-banner img{
    width:100%;
    height:auto;
    display:block;
  }

  /* Hero */
  .hero{
    padding:52px 0 20px;
    position:relative;
  }
  .banner-wrap{
    padding:18px 0 0;
  }
  .banner-wrap img{
    width:100%;
    height:auto;
    border-radius:16px;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:34px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(30px,5.4vw,46px);
    line-height:1.12;
    margin-bottom:16px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--terracotta-deep);
    position:relative;
    white-space:nowrap;
  }
  .hero p.lead{margin-bottom:26px;}
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:22px;
  }
  .hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .badge{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--card);
    border:1px solid var(--line);
    padding:8px 14px;
    border-radius:12px;
    font-size:13px;
    font-weight:700;
    color:var(--ink-soft);
  }
  .badge svg{width:16px; height:16px; color:var(--terracotta);}

  .hero-art{
    background:linear-gradient(160deg,var(--turmeric) 0%, var(--marigold) 55%, var(--terracotta) 100%);
    border-radius:24px;
    padding:26px;
    position:relative;
    box-shadow:var(--shadow);
  }
  .hero-art .card-inner{
    background:var(--card);
    border-radius:16px;
    padding:22px;
  }
  .hero-art h3{font-size:18px; margin-bottom:4px;}
  .hero-art .muted{color:var(--ink-soft); font-size:13px; margin-bottom:16px;}
  .hero-stats{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .hero-stats div{
    background:var(--peach);
    border-radius:12px;
    padding:12px 14px;
  }
  .hero-stats strong{display:block; font-family:'Baloo 2'; font-size:20px; color:var(--terracotta-deep);}
  .hero-stats span{font-size:12px; color:var(--ink-soft); font-weight:700;}

  /* About */
  .about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
    align-items:start;
  }
  .about-points{
    display:grid;
    gap:14px;
    margin-top:20px;
  }
  .point{
    display:flex;
    gap:14px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
  }
  .point .ic{
    width:40px; height:40px;
    flex-shrink:0;
    border-radius:10px;
    background:var(--peach);
    display:flex; align-items:center; justify-content:center;
  }
  .point .ic svg{width:20px; height:20px; color:var(--terracotta-deep);}
  .point h3{font-size:16px; margin-bottom:3px;}
  .point p{font-size:14px; color:var(--ink-soft);}

  .about-card{
    background:linear-gradient(150deg,var(--peach),var(--cream));
    border:1px solid var(--line);
    border-radius:20px;
    padding:26px;
  }
  .about-card .quote-mark{
    font-family:'Baloo 2';
    font-size:52px;
    color:var(--marigold);
    line-height:.6;
    margin-bottom:8px;
  }
  .about-card p{font-size:15px; color:var(--ink-soft); margin-bottom:18px;}
  .signee{display:flex; align-items:center; gap:12px;}
  .signee .av{
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg,var(--terracotta),var(--marigold));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:'Baloo 2'; font-weight:700;
  }
  .signee strong{display:block; font-size:14px;}
  .signee span{font-size:12px; color:var(--ink-soft);}

  /* Services */
  .bg-alt{background:var(--peach);}
  .service-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-top:26px;
  }
  .service-card{
    background:var(--card);
    border-radius:16px;
    padding:20px;
    border:1px solid var(--line);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
  .service-card .ic{
    width:46px; height:46px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--marigold),var(--terracotta));
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
  }
  .service-card .ic svg{width:24px; height:24px; color:#fff;}
  .service-card h3{font-size:17px; margin-bottom:6px;}
  .service-card p{font-size:14px; color:var(--ink-soft);}

  /* Gallery */
  .gallery-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:26px;
  }
  .gallery-item{
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--card);
  }
  .gallery-item .frame{
    aspect-ratio:4/3;
    background:linear-gradient(160deg,var(--turmeric),var(--peach));
    display:flex; align-items:center; justify-content:center;
  }
  .gallery-item .frame svg{width:62%; height:62%;}
  .gallery-item .cap{
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .gallery-item .cap h3{font-size:15px;}
  .gallery-item .cap span{font-size:12px; color:var(--ink-soft); font-weight:700;}

  /* Contact */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    margin-top:26px;
  }
  .contact-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:24px;
  }
  .contact-row{
    display:flex;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .contact-row:last-child{border-bottom:none;}
  .contact-row .ic{
    width:42px; height:42px; flex-shrink:0;
    border-radius:11px;
    background:var(--peach);
    display:flex; align-items:center; justify-content:center;
  }
  .contact-row .ic svg{width:21px; height:21px; color:var(--terracotta-deep);}
  .contact-row h3{font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:3px;}
  .contact-row p, .contact-row a{font-size:15px; font-weight:700;}
  .contact-cta{
    background:linear-gradient(150deg,var(--marigold),var(--terracotta-deep));
    border-radius:18px;
    padding:28px 24px;
    color:#fff;
    display:flex;
    flex-direction:column;
    gap:16px;
    justify-content:center;
  }
  .contact-cta h3{color:#fff; font-size:22px;}
  .contact-cta p{color:rgba(255,255,255,0.9); font-size:14px;}
  .contact-cta .btn-call{
    background:#fff;
    color:var(--terracotta-deep);
    box-shadow:none;
  }

  footer{
    background:var(--ink);
    color:#F1E3CE;
    padding:34px 0 20px;
  }
  .footer-grid{
    display:flex;
    flex-direction:column;
    gap:18px;
    text-align:center;
  }
  footer .brand{color:#fff;}
  footer .brand span.dot{background:var(--turmeric); box-shadow:0 0 0 4px rgba(255,255,255,0.08);}
  footer p{font-size:13px; color:#C9B79C;}
  footer .foot-links{
    display:flex;
    gap:18px;
    justify-content:center;
    flex-wrap:wrap;
    font-size:13px;
    font-weight:700;
  }
  .bottom-line{
    text-align:center;
    font-size:12px;
    color:#9C8767;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.08);
  }

  /* Floating mobile call button */
  .fab-call{
    position:fixed;
    bottom:18px;
    right:18px;
    z-index:60;
    width:56px; height:56px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--terracotta),var(--terracotta-deep));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 24px -6px rgba(201,78,18,0.55);
  }
  .fab-call svg{width:26px; height:26px; color:#fff;}

  @media (min-width:768px){
    section{padding:80px 0;}
    nav.links{display:flex;}
    .menu-btn{display:none;}
    .hero{padding:70px 0 30px;}
    .hero-grid{grid-template-columns:1.1fr 0.9fr; gap:50px;}
    .about-grid{grid-template-columns:1.1fr 0.9fr; gap:50px;}
    .service-grid{grid-template-columns:repeat(3,1fr);}
    .gallery-grid{grid-template-columns:repeat(3,1fr);}
    .contact-grid{grid-template-columns:1.1fr 0.9fr;}
    .footer-grid{flex-direction:row; justify-content:space-between; text-align:left;}
    .foot-links{justify-content:flex-end;}
    .fab-call{display:none;}
  }
  @media (min-width:1024px){
    .hero h1{font-size:50px;}
  }