:root{
    --cream:#FBF4EC;
    --cream-deep:#F3E4D3;
    --paper:#FFFDFA;
    --blush:#F0C4C9;
    --blush-soft:#F7DEE1;
    --rose:#C67B85;
    --rose-deep:#A65763;
    --rose-ink:#7A3B45;
    --wood-tone:#AD8256;
    --wood-dark:#7A5A3A;
    --ink:#3E322E;
    --ink-soft:#6B5B54;
    --line:rgba(122,59,69,0.18);
    --shadow-soft: 0 20px 45px rgba(122,59,69,0.10);
    --shadow-card: 0 14px 30px rgba(122,59,69,0.12);
    --radius-lg: 28px;
    --radius-md: 18px;
    --font-display: 'Fraunces', serif;
    --font-body: 'Jost', sans-serif;
    --font-hand: 'Caveat', cursive;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  section{position:relative;}
  .wrap{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
  }
  @media (max-width: 640px){ .wrap{ padding: 0 20px; } }

  h1,h2,h3,h4{
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--rose-ink);
    line-height: 1.12;
    letter-spacing: -0.01em;
  }
  .eyebrow{
    font-family: var(--font-hand);
    font-size: 1.5rem;
    color: var(--rose);
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom: 6px;
  }
  .eyebrow svg{ width:18px; height:18px; flex-shrink:0; }
  p.lead{
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 46ch;
  }
  .center{ text-align:center; margin-left:auto; margin-right:auto; }

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing:.02em;
    padding: 15px 30px;
    border-radius: 999px;
    border: none;
    cursor:pointer;
    transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s ease, background .3s ease;
    white-space:nowrap;
  }
  .btn svg{ width:19px; height:19px; }
  .btn-primary{
    background: var(--rose-deep);
    color: var(--paper);
    box-shadow: 0 10px 24px rgba(166,87,99,0.35);
  }
  .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(166,87,99,0.4); }
  .btn-outline{
    background: transparent;
    color: var(--rose-ink);
    border: 1.5px dashed var(--rose);
  }
  .btn-outline:hover{ background: rgba(198,123,133,0.08); transform: translateY(-2px); }
  .btn-light{
    background: var(--paper);
    color: var(--rose-deep);
  }
  .btn-light:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,0.12); }

  /* ===== Header ===== */
  header{
    position: fixed;
    top:0; left:0; right:0;
    z-index: 500;
    padding: 22px 0;
    transition: all .4s ease;
  }
  header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  header.scrolled{
    background: rgba(251,244,236,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 12px 0;
    box-shadow: 0 6px 24px rgba(122,59,69,0.08);
  }
  .logo{
    font-family: var(--font-hand);
    font-size: 2rem;
    color: var(--rose-ink);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .logo svg{ width:26px; height:26px; }
  nav.main-nav{ display:flex; align-items:center; gap:38px; }
  nav.main-nav a.nav-link{
    font-size: 0.92rem;
    color: var(--ink);
    position:relative;
    padding: 4px 0;
  }
  nav.main-nav a.nav-link::after{
    content:'';
    position:absolute;
    left:0; bottom:-3px;
    width:0; height:1.5px;
    background: var(--rose);
    transition: width .3s ease;
  }
  nav.main-nav a.nav-link:hover::after{ width:100%; }
  .nav-cta{ display:flex; align-items:center; gap:22px; }
  .burger{
    display:none;
    width:26px; height:20px;
    position:relative;
    cursor:pointer;
    background:none; border:none;
  }
  .burger span{
    position:absolute; left:0; width:100%; height:2px;
    background: var(--rose-ink); border-radius:2px;
    transition: all .3s ease;
  }
  .burger span:nth-child(1){ top:0; }
  .burger span:nth-child(2){ top:9px; }
  .burger span:nth-child(3){ top:18px; }
  .burger.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

  @media (max-width: 900px){
    nav.main-nav{
      position: fixed;
      top:0; right:0;
      height:100vh;
      width: min(320px, 78vw);
      background: var(--paper);
      flex-direction: column;
      justify-content:center;
      align-items:flex-start;
      gap: 26px;
      padding: 40px;
      transform: translateX(100%);
      transition: transform .45s cubic-bezier(.2,.9,.3,1);
      box-shadow: -14px 0 40px rgba(0,0,0,0.08);
    }
    nav.main-nav.open{ transform: translateX(0); }
    .nav-cta{ display:none; }
    .burger{ display:block; }
  }

  .reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1); }
  .reveal.in{ opacity:1 }
  /* transform: translateY(0); */

  /* ===== Hero ===== */
  .hero{
    min-height: 100vh;
    display:flex;
    align-items:center;
    padding: 150px 0 90px;
    background:
      radial-gradient(circle at 14% 18%, rgba(240,196,201,0.55) 0%, transparent 45%),
      radial-gradient(circle at 90% 8%, rgba(173,130,86,0.14) 0%, transparent 40%),
      radial-gradient(circle at 82% 88%, rgba(240,196,201,0.4) 0%, transparent 42%),
      var(--cream);
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 60px;
    align-items:center;
  }
  @media (max-width: 900px){
    .hero .wrap{ grid-template-columns: 1fr; }
    .hero{ padding-top: 130px; }
  }
  .hero-copy .eyebrow{ font-size:1.7rem; }
  .hero h1{
    font-size: clamp(2.5rem, 5vw, 3.7rem);
    margin: 6px 0 22px;
  }
  .hero h1 em{ font-style: italic; color: var(--rose); }
  .hero p.lead{ margin-bottom: 34px; }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 40px;}
  .hero-trust{ display:flex; gap: 28px; flex-wrap:wrap; }
  .hero-trust div{ display:flex; flex-direction:column; }
  .hero-trust strong{ font-family:var(--font-display); font-size:1.5rem; color:var(--rose-ink); }
  .hero-trust span{ font-size:0.8rem; color:var(--ink-soft); }

  .hero-visual{ position:relative; display:flex; justify-content:center; }
  .hero-frame{
    position:relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1024/1536;
    border-radius: var(--radius-lg);
    background: #E2A9AE;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-soft);
    overflow:hidden;
    transform: rotate(-2.2deg);
  }
  .hero-frame::before{
    content:'';
    position:absolute; inset:14px;
    border: 1.5px dashed rgba(255,255,255,0.65);
    border-radius: calc(var(--radius-lg) - 8px);
    pointer-events:none;
  }
  .hero-tape{
    position:absolute; top:-14px; left:38%;
    width:90px; height:34px;
    background: rgba(255,253,250,0.7);
    border: 1px solid rgba(122,59,69,0.15);
    transform: rotate(-6deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  }
  .hero-badge{
    position:absolute;
    bottom: -22px; left: -22px;
    background: var(--paper);
    border-radius: 50%;
    width:118px; height:118px;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    box-shadow: var(--shadow-card);
    font-family: var(--font-hand);
    color: var(--rose-deep);
    font-size: 1.05rem;
    line-height:1.2;
    transform: rotate(-8deg);
    border: 1.5px dashed var(--rose);
  }
  @media (max-width:900px){ .hero-visual{ margin-top:20px; } .hero-badge{ bottom:-16px; left:8px; width:96px; height:96px; font-size:0.9rem;} }

  /* ===== Ticker ===== */
  .ticker{
    background: var(--rose-ink);
    color: var(--blush-soft);
    padding: 15px 0;
    overflow:hidden;
    white-space:nowrap;
  }
  .ticker-track{
    display:inline-flex;
    gap: 46px;
    animation: scroll-left 32s linear infinite;
    font-family: var(--font-hand);
    font-size: 1.35rem;
  }
  .ticker-track span{ display:inline-flex; align-items:center; gap:14px; }
  .ticker-track svg{ width:14px; height:14px; opacity:.7; }
  @keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ===== About ===== */
  .about{ padding: 130px 0 100px; }
  .about .wrap{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items:center; }
  @media (max-width:900px){ .about .wrap{ grid-template-columns:1fr; gap:44px; } }

  .about-visual{ position:relative; max-width: 380px; margin: 0 auto; }
  @media (min-width:901px){ .about-visual{ margin: 0; } }
  .photo-frame{
    border-radius: var(--radius-lg);
    background: var(--paper);
    padding: 14px;
    box-shadow: var(--shadow-soft);
    position:relative;
  }
  .photo-frame .inner{
    border-radius: calc(var(--radius-lg) - 8px);
    aspect-ratio: 1024/1536;
    background: #EFD9C4;
    background-size: cover;
    background-position: center;
    position:relative;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .photo-frame::after{
    content:'';
    position:absolute; inset:14px;
    border: 1.5px dashed rgba(255,255,255,0.55);
    border-radius: calc(var(--radius-lg) - 10px);
    pointer-events:none;
  }
  .about-stamp{
    position:absolute; top:-20px; right:-18px;
    background: var(--cream);
    border: 1.5px dashed var(--rose);
    border-radius: 50%;
    width: 108px; height:108px;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-hand);
    color:var(--rose-deep);
    font-size: 1rem;
    text-align:center;
    transform: rotate(7deg);
    box-shadow: var(--shadow-card);
  }
  .about-copy h2{ font-size: clamp(2rem,3.4vw,2.7rem); margin-bottom:20px; }
  .about-copy p.lead{ max-width:52ch; margin-bottom: 30px;}
  .stat-row{ display:flex; gap:36px; flex-wrap:wrap; padding-top: 14px; border-top: 1px dashed var(--line); }
  .stat-row div strong{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--rose-ink); }
  .stat-row div span{ font-size:0.82rem; color:var(--ink-soft); }

  /* ===== Services ===== */
  .services{ padding: 100px 0 110px; background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%); }
  .section-head{ max-width:640px; margin: 0 auto 60px; text-align:center; }
  .section-head h2{ font-size: clamp(2rem,3.6vw,2.8rem); }
  .services-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  @media (max-width:960px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:640px){ .services-grid{ grid-template-columns: 1fr; } }

  .service-card{
    background: var(--paper);
    border-radius: var(--radius-md);
    padding: 34px 28px 30px;
    position:relative;
    box-shadow: var(--shadow-card);
    transition: transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s ease;
  }
  .service-card:hover{ transform: translateY(-8px); box-shadow: 0 24px 40px rgba(122,59,69,0.18); }
  .service-card .pin{
    position:absolute; top:-10px; left: 26px;
    width:20px; height:20px; border-radius:50%;
    background: var(--rose);
    box-shadow: 0 4px 8px rgba(0,0,0,0.18);
  }
  .service-icon{
    width:52px; height:52px;
    border-radius:50%;
    background: var(--blush-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 20px;
  }
  .service-icon svg{ width:26px; height:26px; color: var(--rose-deep); }
  .service-card h3{ font-size:1.28rem; margin-bottom:10px; }
  .service-card p{ color:var(--ink-soft); font-size:0.92rem; line-height:1.65; margin-bottom:18px; }
  .service-card .card-link{
    font-size:0.85rem; font-weight:500; color:var(--rose-deep);
    display:inline-flex; align-items:center; gap:6px;
    border-bottom: 1px dashed var(--rose);
    padding-bottom:2px;
  }
  .service-card .card-link svg{ width:14px; height:14px; transition: transform .3s ease; }
  .service-card:hover .card-link svg{ transform: translateX(4px); }

  /* ===== Process (signature thread timeline) ===== */
  .process{ padding: 110px 0 100px; }
  .process-wrap{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-top:70px; }
  @media (max-width:900px){ .process-wrap{ grid-template-columns:1fr; gap:54px; } }
  .thread-svg{ position:absolute; top:38px; left:0; width:100%; height:6px; z-index:0; }
  @media (max-width:900px){
    .thread-svg{ top:0; left:38px; width:6px; height:100%; }
  }
  .thread-svg path{
    stroke: var(--rose);
    stroke-width:2.5;
    stroke-dasharray: 9 10;
    fill:none;
    stroke-linecap:round;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2.2s ease;
  }
  .thread-svg.in path{ stroke-dashoffset:0; }

  .process-step{ position:relative; z-index:1; text-align:center; }
  @media (max-width:900px){ .process-step{ text-align:left; padding-left: 74px; } }
  .step-num{
    width:76px; height:76px;
    border-radius:50%;
    background: var(--paper);
    border: 2px dashed var(--rose);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display);
    font-size:1.5rem;
    color: var(--rose-deep);
    margin: 0 auto 22px;
    box-shadow: var(--shadow-card);
  }
  @media (max-width:900px){ .step-num{ position:absolute; left:0; top:0; margin:0; width:64px; height:64px; font-size:1.2rem; } }
  .process-step h3{ font-size:1.12rem; margin-bottom:10px; }
  .process-step p{ color:var(--ink-soft); font-size:0.9rem; line-height:1.6; max-width:240px; margin:0 auto; }
  @media (max-width:900px){ .process-step p{ margin:0; max-width:none; } }

  /* ===== Gallery ===== */
  .gallery{ padding: 100px 0 110px; background: var(--cream-deep); }
  .gallery .wrap{ max-width: 940px; }
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  @media (max-width:900px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:560px){ .gallery-grid{ grid-template-columns: 1fr; } }
  .gallery-item{
    position:relative;
    background: var(--paper);
    padding: 10px 10px 46px;
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    transform: rotate(var(--tilt, 0deg));
    transition: transform .4s ease, box-shadow .4s ease;
  }
  .gallery-item:hover{ transform: rotate(0deg) translateY(-6px); box-shadow: 0 22px 36px rgba(122,59,69,0.2); }
  .gallery-item .swatch{
    aspect-ratio: 4/3.2;
    border-radius: 8px;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .gallery-item .swatch img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gallery-item figcaption{
    position:absolute; bottom:14px; left:0; right:0;
    text-align:center;
    font-family: var(--font-hand);
    font-size:1.15rem;
    color: var(--rose-ink);
  }
  .gallery-note{
    text-align:center;
    margin-top:36px;
    font-size:0.85rem;
    color: var(--ink-soft);
  }

  /* ===== CTA ===== */
  .cta-band{
    margin: 32px 32px 100px;
    border-radius: 36px;
    background: linear-gradient(135deg, #C67B85 0%, #A65763 100%);
    padding: 80px 40px;
    text-align:center;
    position:relative;
    overflow:hidden;
    box-shadow: var(--shadow-soft);
  }
  .cta-band::before, .cta-band::after{
    content:'';
    position:absolute;
    border-radius:50%;
    background: rgba(255,255,255,0.08);
  }
  .cta-band::before{ width:260px; height:260px; top:-100px; left:-80px; }
  .cta-band::after{ width:200px; height:200px; bottom:-90px; right:-60px; }
  .cta-band h2{ color: var(--paper); font-size: clamp(1.9rem,3.6vw,2.7rem); max-width:640px; margin:0 auto 18px; position:relative; }
  .cta-band p{ color: rgba(255,253,250,0.88); max-width:480px; margin:0 auto 34px; position:relative; }
  .cta-band .btn-light{ position:relative; }
  @media (max-width:640px){ .cta-band{ margin: 0 16px 70px; padding: 60px 24px; border-radius: 26px; } }
  
  /* ===== Footer ===== */
  footer{ background: var(--rose-ink); color: var(--blush-soft); padding: 70px 0 30px; }
  .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; margin-bottom: 50px; }
  @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:36px; } }
  footer .logo{ color: var(--blush-soft); }
  footer p.foot-tag{ margin-top:14px; font-size:0.9rem; color: rgba(247,222,225,0.75); max-width:32ch; line-height:1.6; }
  footer h4{ color: var(--paper); font-size:1rem; margin-bottom:18px; font-weight:500; }
  footer ul li{ margin-bottom:11px; font-size:0.9rem; }
  footer ul li a{ color: rgba(247,222,225,0.85); display:inline-flex; align-items:center; gap:8px; transition: color .25s ease; }
  footer ul li a:hover{ color: var(--paper); }
  footer ul li svg{ width:15px; height:15px; flex-shrink:0; }
  .footer-bottom{
    border-top: 1px dashed rgba(247,222,225,0.25);
    padding-top: 26px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:0.8rem; color: rgba(247,222,225,0.65);
  }

  /* ===== Floating WhatsApp ===== */
  .whatsapp-float{
    position:fixed; bottom:26px; right:26px; z-index:600;
    width:62px; height:62px; border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 26px rgba(37,211,102,0.45);
    animation: pulse 2.6s ease-in-out infinite;
  }
  .whatsapp-float svg{ width:30px; height:30px; color:#fff; }
  @keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.07);} }
  @media (max-width:640px){ .whatsapp-float{ width:54px; height:54px; bottom:18px; right:18px; } .whatsapp-float svg{ width:26px; height:26px; } }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
  }

  ::selection{ background: var(--blush); color: var(--rose-ink); }
  :focus-visible{ outline: 2px dashed var(--rose-deep); outline-offset: 3px; }