:root{
    --ink:#1c1815;
    --ink-soft:#2b241f;
    --ivory:#faf6ef;
    --ivory-dim:#f1e9db;
    --gold:#b8924a;
    --gold-deep:#8c6d34;
    --gold-pale:#e7d9ba;
    --sage:#7a8b6f;
    --clay:#a9603e;
    --bronze:#6b4423;
    --line: rgba(28,24,21,0.14);
    --line-ivory: rgba(250,246,239,0.16);
    --shadow: 0 20px 50px -25px rgba(28,24,21,0.45);

    --font-display:'Playfair Display', Georgia, serif;
    --font-script:'Cormorant Garamond', Georgia, serif;
    --font-body:'Poppins', -apple-system, sans-serif;

    --wrap: min(1180px, 92vw);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--ivory);
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:var(--font-display);
    margin:0;
    font-weight:600;
    letter-spacing:.005em;
    color:var(--ink);
  }
  p{margin:0;}
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  ul{margin:0; padding:0; list-style:none;}

  .wrap{width:var(--wrap); margin-inline:auto;}
  .eyebrow{
    font-family:var(--font-body);
    text-transform:uppercase;
    font-size:.72rem;
    letter-spacing:.22em;
    font-weight:600;
    color:var(--gold-deep);
    display:inline-flex;
    align-items:center;
    gap:.55em;
  }
  /*.eyebrow.on-dark{color:var(--gold);}*/
  .eyebrow.on-dark{color:#fff;}

  /* ---------- Knot glyph, the signature motif ---------- */
  .knot{
    width:1em; height:1em;
    flex:none;
    display:inline-block;
  }
  .knot svg{width:100%; height:100%; display:block;}

  section{position:relative;}
  .section-pad{padding: clamp(64px, 9vw, 128px) 0;}
  .section-head{
    max-width:640px;
    margin-bottom: clamp(36px, 5vw, 64px);
  }
  .section-head h2{
    font-size:clamp(1.9rem, 3.4vw, 2.7rem);
    margin-top:.5em;
    line-height:1.15;
  }
  .section-head p{
    margin-top:1em;
    font-size:1.02rem;
    color:var(--ink-soft);
    opacity:.85;
  }
  .center{text-align:center; margin-inline:auto;}

  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

 
  /* ================= HERO ================= */
  .hero{
    min-height:100svh;
    display:flex; align-items:center;
    color:var(--ivory);
    background:
      radial-gradient(ellipse at 78% 12%, rgba(184,146,74,0.16), transparent 55%),
      linear-gradient(180deg, rgba(20,17,14,.55), rgba(20,17,14,.86)),
      var(--ink);
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  .hero::before{
    content:'';
    position:absolute; inset:0; z-index:-1;
    opacity:.5;
    /*background-image:
      repeating-linear-gradient(45deg, rgba(184,146,74,0.07) 0 2px, transparent 2px 26px),
      repeating-linear-gradient(-45deg, rgba(250,246,239,0.045) 0 2px, transparent 2px 26px);*/
    background-image: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(184, 146, 74, 0.055) 19px, rgba(184, 146, 74, 0.055) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(184, 146, 74, 0.055) 19px, rgba(184, 146, 74, 0.055) 20px);
    content: '';
    position: absolute;
    inset: 0;
  }
  .hero::after{
    content:'';
    position:absolute; inset:0; z-index:-1;
    opacity:.5;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 22px, rgba(184, 146, 74, 0.028) 22px, rgba(184, 146, 74, 0.028) 23px), repeating-linear-gradient(-45deg, transparent, transparent 22px, rgba(184, 146, 74, 0.028) 22px, rgba(184, 146, 74, 0.028) 23px);
    pointer-events: none;
  }
  .hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(184, 146, 74, 0.07) 0%, transparent 65%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 38%, rgba(8, 5, 1, 0.6) 100%);
    pointer-events: none;
  }
  .hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26, 18, 8, 0.45) 0%, transparent 22%, transparent 78%, rgba(26, 18, 8, 0.45) 100%);
    pointer-events: none;
  }
  .hero-inner{padding-top:120px; padding-bottom:80px; max-width:820px; text-align: center;}
  .hero .eyebrow{margin-bottom:22px;}
  .hero h1{
    font-size:clamp(2.5rem, 6vw, 4.6rem);
    line-height:1.05;
    color:var(--ivory);
  }
  .hero h1 .accent{color:var(--gold); font-style:italic; font-family:var(--font-script); font-weight:500;}
  .hero .lede{
    font-family:var(--font-script);
    font-style:italic;
    font-size:clamp(1.15rem, 1.7vw, 1.5rem);
    color:var(--gold-pale);
    margin-top:26px;
    /*max-width:600px;*/
    line-height:1.5;
  }
  .hero-actions{display:inline-flex; flex-wrap:wrap; gap:16px; margin-top:44px;}
  .hero-stats{
    margin-top:64px; display:flex; gap:clamp(20px,4vw,52px); flex-wrap:wrap;
    border-top:1px solid var(--line-ivory); padding-top:30px;
  }
  .hero-stats div{min-width:120px;}
  .hero-stats strong{display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--gold);}
  .hero-stats span{font-size:.78rem; letter-spacing:.05em; opacity:.75; text-transform:uppercase;}
  .scroll-cue{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--ivory); opacity:.55; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  }
  .scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--gold), transparent); animation:scrollcue 2s ease-in-out infinite;}
  @keyframes scrollcue{0%{opacity:0; transform:translateY(-6px);}50%{opacity:1;}100%{opacity:0; transform:translateY(10px);}}

  /* ================= INTRO ================= */
  .intro{background:var(--ivory);}
  .intro .wrap{display:grid; grid-template-columns:.85fr 1.25fr; gap:clamp(30px,5vw,90px); align-items:start;}
  .intro h2{font-size:clamp(1.9rem,3vw,2.6rem); line-height:1.18;}
  .intro-copy{position:relative; padding-left:clamp(0px,3vw,34px); border-left:1px solid var(--line);}
  .intro-copy p{color:var(--ink-soft); font-size:1.06rem;}
  .intro-copy p + p{margin-top:20px;}
  @media (max-width:800px){ .intro .wrap{grid-template-columns:1fr;} .intro-copy{padding-left:0; border-left:none;} }

  /* ================= SERVICE PANELS ================= */
  .service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:900px){ .service-grid{grid-template-columns:1fr;} }
  .service-card{
    --accent: var(--gold);
    background:var(--ivory);
    padding:clamp(36px,4vw,54px) clamp(30px,4vw,46px);
    position:relative;
    overflow:hidden;
  }
  .service-card .index{
    position:absolute; top:10px; right:22px;
    font-family:var(--font-display); font-size:5.2rem; font-weight:700;
    color:transparent; -webkit-text-stroke:1px var(--line);
    line-height:1; user-select:none; pointer-events:none;
  }
  .service-card .icon-badge{
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    color:var(--accent);
    margin-bottom:26px; position:relative; z-index:1;
  }
  .icon-badge svg{width:26px; height:26px;}
  .service-card h3{font-size:1.5rem; margin-bottom:10px; max-width:420px; position:relative; z-index:1;}
  .service-card .tag{
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
    color:var(--accent); display:block; margin-bottom:16px; position:relative; z-index:1;
  }
  .service-card p.desc{color:var(--ink-soft); font-size:.98rem; margin-bottom:24px; max-width:420px; position:relative; z-index:1;}
  .service-card .list-label{font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; font-weight:600; color:var(--ink); opacity:.55; margin-bottom:12px; display:block; position:relative; z-index:1;}
  .service-card ul{display:flex; flex-direction:column; gap:10px; position:relative; z-index:1;}
  .service-card li{display:flex; align-items:flex-start; gap:.6em; font-size:.92rem; color:var(--ink-soft);}
  .service-card li .knot{margin-top:.3em; width:.78em; height:.78em; color:var(--accent);}
  .card-sage{--accent: var(--sage);}
  .card-bronze{--accent: var(--bronze);}
  .card-clay{--accent: var(--clay);}
  .card-gold{--accent: var(--gold);}

  /* ================= PROCESS (editorial numbered list) ================= */
  .timeline{background:var(--ink); color:var(--ivory);}
  .timeline .section-head p{color:var(--ivory); opacity:.65;}

  .process-list{
    display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(30px,4vw,64px);
    border-top:1px solid var(--line-ivory);
  }
  @media (max-width:820px){ .process-list{grid-template-columns:1fr;} }

  .process-row{
    --accent:var(--gold);
    display:flex; align-items:flex-start; gap:20px;
    padding:26px 0; border-bottom:1px solid var(--line-ivory);
  }
  .process-num{
    font-family:var(--font-display); font-size:1.5rem; font-weight:700;
    color:transparent; -webkit-text-stroke:1px var(--accent);
    flex:none; width:2ch; line-height:1;
  }
  .process-icon{
    width:38px; height:38px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    color:var(--accent);
    transition:transform .35s ease;
  }
  .process-icon svg{width:19px; height:19px;}
  .process-row:hover .process-icon{transform:scale(1.08) rotate(-4deg);}
  .process-body h3{font-size:1.02rem; color:var(--ivory); margin-bottom:5px; line-height:1.3;}
  .process-body p{font-size:.85rem; color:var(--ivory); opacity:.62; line-height:1.55; max-width:36ch;}

  .process-row.acc-sage{--accent:var(--sage);}
  .process-row.acc-bronze{--accent:var(--bronze);}
  .process-row.acc-clay{--accent:var(--clay);}
  .process-row.acc-gold{--accent:var(--gold);}
  .timeline h2 {
    color: #ffffff !important;
  }

  /* ================= PROMISE / GUARANTEE ================= */
  .promise{background:var(--ivory);}
  .promise .wrap{display:block; max-width:920px; margin:0 auto;}
  .promise-block h3{font-size:clamp(1.35rem,2.4vw,1.7rem); margin-bottom:8px; line-height:1.35; max-width:820px;}
  .promise-block .kicker{font-family:var(--font-script); font-style:italic; color:var(--gold-deep); font-size:1.12rem; display:block; margin-bottom:18px;}
  .check-list{display:flex; flex-direction:column; gap:14px;}
  .check-list li{
    display:flex; align-items:flex-start; gap:14px;
    font-size:.98rem; color:var(--ink-soft);
    padding-bottom:14px; border-bottom:1px solid var(--line);
  }
  .check-list li:last-child{border-bottom:none;}
  .check-list.two-col{display:grid; grid-template-columns:1fr 1fr; gap:6px 36px;}
  @media (max-width:640px){ .check-list.two-col{grid-template-columns:1fr;} }
  .check-icon{
    width:22px; height:22px; flex:none; margin-top:3px;
    color:var(--gold-deep);
  }
  .check-icon svg{width:100%; height:100%;}

  /* ================= WARRANTY ================= */
  .warranty{
    background:linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%);
    color:var(--ivory);
    position:relative;
  }
  .warranty-card{
    border:1px solid var(--gold);
    border-radius:2px;
    padding:clamp(34px,4vw,58px);
    display:grid;
    grid-template-columns:auto 1fr;
    gap:clamp(28px,4vw,50px);
    align-items:center;
    background:rgba(171,130,63,0.05);
  }
  @media (max-width:720px){ .warranty-card{grid-template-columns:1fr; text-align:center;} .warranty-card .badge{margin-inline:auto;} }
  .warranty-card .badge{
    width:136px; height:136px; border-radius:50% !important;
    border:1px solid var(--gold);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--gold);
    background:radial-gradient(circle, rgba(171,130,63,0.14), transparent 70%);
  }
  .warranty-card .badge strong{font-family:var(--font-display); font-size:2.2rem; line-height:1;}
  .warranty-card .badge span{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; margin-top:6px;}
  .warranty-copy h3{color:var(--ivory); font-size:1.75rem; margin-bottom:16px; line-height:1.35;}
  .warranty-copy p{color:var(--ivory); opacity:.72; margin-bottom:20px; max-width:640px;}
  .warranty-copy .covers{display:flex; flex-wrap:wrap; gap:10px;}
  .warranty-copy .covers span{
    font-size:.78rem; padding:8px 16px; border:1px solid var(--line-ivory); border-radius:20px; opacity:.85;
  }

  /* ================= CARE TIPS ================= */
  .care{background:var(--ivory-dim);}
  .care-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    border-top:1px solid var(--line); border-left:1px solid var(--line);
  }
  .care-item{
    background:transparent; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:28px 26px; display:flex; gap:16px; align-items:flex-start;
  }
  .care-item .knot{width:1.3em; height:1.3em; color:var(--gold); margin-top:2px;}
  .care-item p{font-size:.92rem; color:var(--ink-soft);}

  /* ================= TERMS ================= */
  .terms{background:var(--ivory);}
  .terms-wrap{max-width:820px; margin-inline:auto;}
  .terms-heading{
    font-family:var(--font-display); font-size:1.2rem; font-weight:600;
    padding:6px 0 18px; display:flex; align-items:center; gap:10px; color:var(--ink);
  }
  .terms ul{display:flex; flex-direction:column; gap:12px;}
  .terms li{font-size:.88rem; color:var(--ink-soft); padding-left:18px; position:relative;}
  .terms li::before{content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; background:var(--gold); border-radius:50%;}

  /* ================= EXCLUSIVITY NOTICE ================= */
  .exclusive{background:var(--ivory-dim, var(--ivory));}
  .exclusive-card{
    max-width:760px; margin-inline:auto; text-align:center;
    background:var(--ivory); border:1px solid var(--line);
    border-top:3px solid var(--gold);
    border-radius:6px; padding:48px clamp(24px,5vw,56px);
    position:relative;
  }
  .exclusive-badge{
    width:56px; height:56px; border-radius:50%; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--gold) 14%, transparent);
    color:var(--gold-deep);
  }
  .exclusive-badge svg{width:26px; height:26px;}
  .exclusive-card .eyebrow{justify-content:center; width:100%; margin-bottom:14px;}
  .exclusive-card h3{font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:16px; line-height:1.3;}
  .exclusive-card p{color:var(--ink-soft); font-size:1rem; line-height:1.7; max-width:620px; margin-inline:auto;}

  /* ─── CTA BANNER ──────────────────────────────────────────── */
  .cta-banner {
    /*background: var(--deep);*/
    padding: 72px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect x='38' y='38' width='4' height='4' fill='%23B8924A' opacity='0.08'/%3E%3C/svg%3E") repeat;
  }
  .cta-inner { max-width: 640px; margin: 0 auto; position: relative; }
  .cta-banner h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
  }
  .cta-banner h2 em { color: var(--gold); font-style: italic; }
  .cta-banner p { font-size: 15px; color: rgba(255,255,255,0.55); margin-bottom: 32px; }
  .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .btn-primary {
    background: var(--gold);
    color: var(--deep);
    padding: 13px 32px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s, transform .15s;
  }
  .cta-buttons a.btn-primary {
      color: #ffffff !important;
      background: #b8924a !important;
  }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
  .btn-outline {
    border: 1px solid rgba(184,146,74,0.5);
    color: var(--gold-light);
    padding: 13px 32px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color .2s, color .2s;
  }
  .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

  /* ================= CTA / INSPECTION ================= */
  .cta{
    background:var(--ink); color:var(--ivory); position:relative; overflow:hidden;
  }
  .cta::before{
    content:''; position:absolute; inset:0; opacity:.4;
    background-image:repeating-linear-gradient(45deg, rgba(184,146,74,0.06) 0 2px, transparent 2px 26px);
  }
  .cta .wrap{position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,70px);}
  @media (max-width:900px){ .cta .wrap{grid-template-columns:1fr;} }
  .cta-copy h2{color:var(--ivory); font-size:clamp(1.9rem,3.2vw,2.5rem); margin-top:.5em; line-height:1.2;}
  .cta-copy p{color:var(--ivory); opacity:.72; margin-top:16px; max-width:440px;}
  .whatsapp-box{
    margin-top:32px; padding:20px 22px; border:1px solid var(--line-ivory); border-radius:4px;
    display:flex; align-items:center; gap:16px;
  }
  .whatsapp-box .wa-icon{
    width:44px; height:44px; border-radius:50%; background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .whatsapp-box .wa-icon svg{width:22px; height:22px;}
  .whatsapp-box strong{display:block; font-size:.95rem;}
  .whatsapp-box span{font-size:.82rem; opacity:.65;}
  .whatsapp-box a.chatlink{margin-left:auto; font-size:.8rem; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; font-weight:600; white-space:nowrap;}

  .form-card{
    background:var(--ivory); color:var(--ink); border-radius:6px;
    padding:clamp(26px,3vw,40px); box-shadow:var(--shadow);
  }
  .form-card h3{font-size:1.25rem; margin-bottom:6px;}
  .form-card .sub{font-size:.85rem; color:var(--ink-soft); opacity:.75; margin-bottom:22px; display:block;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; font-weight:600; margin-bottom:7px; opacity:.7;}
  .field input, .field select, .field textarea{
    width:100%; border:1px solid var(--line); background:#fff; border-radius:3px;
    padding:12px 14px; font-family:var(--font-body); font-size:.92rem; color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,146,74,.15);
  }
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:480px){ .field-row{grid-template-columns:1fr;} }
  .form-card button[type="submit"]{width:100%; justify-content:center; margin-top:6px;}
  .form-success{
    display:none; align-items:center; gap:12px; margin-top:16px; padding:14px 16px;
    background:color-mix(in srgb, var(--sage) 14%, transparent); border:1px solid var(--sage);
    border-radius:4px; font-size:.85rem; color:var(--bronze);
  }
  .form-success.show{display:flex;}
  .form-success .knot{color:var(--sage);}

 .hero-actions .btn-primary {
    color: #fff;
    background: #b8924a !important;
 }