/* ==========================================================================
   Howiga Walohe — Chromatic Layers design system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --primary: oklch(46% 0.14 264);
  --primary-2: oklch(58% 0.13 264);
  --secondary: oklch(64% 0.11 210);
  --accent: oklch(72% 0.17 48);
  --accent-2: oklch(60% 0.18 48);

  --ink: oklch(24% 0.02 264);
  --ink-soft: oklch(42% 0.02 264);
  --paper: oklch(98% 0.006 264);

  --bg: oklch(97% 0.008 264);
  --bg-alt: color-mix(in oklch, var(--secondary), white 90%);
  --bg-deep: color-mix(in oklch, var(--primary), white 94%);

  --surface: color-mix(in oklch, white, var(--primary) 3%);
  --surface-2: color-mix(in oklch, var(--secondary), white 93%);
  --surface-dark: color-mix(in oklch, var(--primary), black 25%);

  --border: color-mix(in oklch, var(--primary), white 82%);
  --border-soft: color-mix(in oklch, var(--primary), white 90%);
  --border-strong: color-mix(in oklch, var(--primary), white 62%);

  --accent-soft: color-mix(in oklch, var(--accent), white 85%);
  --accent-line: color-mix(in oklch, var(--accent), white 55%);
  --primary-soft: color-mix(in oklch, var(--primary), white 88%);

  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--primary), transparent 88%);
  --shadow-md: 0 8px 20px color-mix(in oklch, var(--primary), transparent 87%), 0 2px 6px color-mix(in oklch, var(--primary), transparent 92%);
  --shadow-lg: 0 24px 48px color-mix(in oklch, var(--primary), transparent 87%), 0 8px 20px color-mix(in oklch, var(--primary), transparent 90%);
  --shadow-glow: 0 0 0 1px color-mix(in oklch, var(--accent), transparent 70%), 0 12px 30px color-mix(in oklch, var(--accent), transparent 80%);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-xl: 44px;
  --radius-full: 999px;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;
  --space-7: 10rem;

  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:'Sora',sans-serif;color:var(--ink);margin:0;line-height:1.15;font-weight:700}
p{margin:0}
button{font-family:inherit;cursor:pointer;background:none;border:none}
input,textarea,select{font-family:inherit}

.container{max-width:1220px;margin-inline:auto;padding-inline:1.5rem}


.hdr{
  position:sticky;top:0;z-index:100;
  padding-block:1.1rem;
  background:color-mix(in oklch, var(--paper), transparent 15%);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
}
.hdr--stuck{
  padding-block:.65rem;
  background:color-mix(in oklch, var(--paper), white 4%);
  box-shadow:var(--shadow-md);
  border-bottom-color:var(--border-soft);
}
.hdr-in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.hdr-logo{display:flex;align-items:center;gap:.6rem;font-family:'Sora',sans-serif;font-weight:700;font-size:1.15rem}
.hdr-logo svg{height:34px;width:auto}
.hdr-nav{display:none}
.hdr-nav ul{display:flex;align-items:center;gap:2.1rem}
.hdr-nav a{
  font-size:.95rem;font-weight:600;color:var(--ink-soft);
  position:relative;padding-block:.3rem;
  transition:color .25s var(--ease);
}
.hdr-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--accent);transition:width .3s var(--ease);
}
.hdr-nav a:hover{color:var(--ink)}
.hdr-nav a:hover::after,.hdr-nav a.is-active::after{width:100%}
.hdr-nav a.is-active{color:var(--ink)}
.hdr-nav .acc-tgl,.hdr-nav .acc-panel{display:none}

.hdr-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--primary);color:var(--paper);
  padding:.75rem 1.4rem;border-radius:var(--radius-full);
  font-weight:600;font-size:.9rem;white-space:nowrap;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.hdr-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--primary-2)}

.hdr-right{display:flex;align-items:center;gap:1rem}

.hamburger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;align-items:center;
  border-radius:var(--radius-sm);
  transition:background .25s var(--ease);
}
.hamburger:hover{background:var(--primary-soft)}
.hamburger .bar{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.hamburger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


.mob-nav{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
  border-top:1px solid transparent;
}
.mob-nav.is-open{max-height:600px;border-top-color:var(--border-soft)}
.mob-nav ul{padding:.5rem 0}
.mob-nav .nav-item{border-bottom:1px solid var(--border-soft)}
.mob-nav .nav-item-row{display:flex;align-items:center;justify-content:space-between}
.mob-nav .nav-item-row a{flex:1;padding:.95rem .25rem;font-weight:600;font-size:1rem}
.mob-nav .acc-tgl{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
}
.mob-nav .acc-tgl i{transition:transform .3s var(--ease)}
.mob-nav .acc-tgl[aria-expanded="true"] i{transform:rotate(180deg)}
.mob-nav .acc-panel{
  max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  padding-left:1rem;
}
.mob-nav .acc-panel.is-open{max-height:220px;padding-bottom:.5rem}
.mob-nav .acc-panel li a{display:block;padding:.6rem .25rem;color:var(--ink-soft);font-size:.92rem}

@media(min-width:960px){
  .hdr-nav{display:block}
  .hamburger{display:none}
  .mob-nav{display:none}
}


.hero{
  min-height:88vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding-block:var(--space-6) var(--space-5);
  background:
    radial-gradient(1200px 700px at 85% -10%, color-mix(in oklch, var(--secondary), transparent 55%), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, color-mix(in oklch, var(--accent), transparent 78%), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
}
.hero-in{
  display:grid;grid-template-columns:1fr;gap:var(--space-4);
  align-items:center;
}
.hero-greet{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:600;letter-spacing:.02em;
  color:var(--primary);background:color-mix(in oklch, var(--primary), white 90%);
  border:1px solid var(--border-soft);
  padding:.5rem 1rem;border-radius:var(--radius-full);
  margin-bottom:var(--space-3);width:fit-content;
}
.hero-greet .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hero-title{
  font-size:clamp(2.4rem, 4.4vw + 1rem, 4.4rem);
  letter-spacing:-.02em;
  max-width:16ch;
}
.hero-title mark{
  background:linear-gradient(180deg, transparent 60%, var(--accent-soft) 60%);
  color:var(--primary);padding-inline:.1em;
}
.hero-sub{
  margin-top:var(--space-3);
  font-size:clamp(1.05rem,.4vw + 1rem,1.25rem);
  color:var(--ink-soft);max-width:52ch;
}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:var(--space-4)}
.hero-meta{
  margin-top:var(--space-5);display:flex;gap:var(--space-4);flex-wrap:wrap;
  padding-top:var(--space-3);border-top:1px solid var(--border-soft);
}
.hero-meta dl{display:flex;flex-direction:column;gap:.15rem}
.hero-meta dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600}
.hero-meta dd{margin:0;font-family:'Sora',sans-serif;font-weight:700;color:var(--primary)}


.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.9rem;border-radius:var(--radius-full);
  font-weight:600;font-size:.95rem;min-height:44px;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn-accent{background:var(--accent);color:var(--surface-dark);box-shadow:var(--shadow-glow)}
.btn-accent:hover{transform:translateY(-3px);background:var(--accent-2)}
.btn-outline{border:1.5px solid var(--border-strong);color:var(--ink);background:color-mix(in oklch, var(--paper), transparent 40%)}
.btn-outline:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-2px)}
.btn-ghost-white{border:1.5px solid color-mix(in oklch, white, transparent 25%);color:white}
.btn-ghost-white:hover{background:color-mix(in oklch, white, transparent 85%);transform:translateY(-2px)}


.sec{padding-block:var(--space-6)}
.sec--tight{padding-block:var(--space-5)}
.sec--alt{background:var(--bg-alt)}
.sec--dark{background:var(--surface-dark);color:color-mix(in oklch, white, transparent 4%)}
.sec--dark .sec-title,.sec--dark h3{color:white}
.sec-tag{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:.9rem;
}
.sec-title{font-size:clamp(1.9rem,2.4vw + 1rem,2.9rem);letter-spacing:-.01em;max-width:22ch}
.sec-sub{margin-top:1rem;color:var(--ink-soft);font-size:1.08rem;max-width:60ch}
.sec-head{margin-bottom:var(--space-4)}
.sec-head--center{text-align:center;margin-inline:auto}


.zig-row{
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;
  padding-block:var(--space-4);
}
.zig-row:not(:last-child){border-bottom:1px solid var(--border-soft)}
.zig-img{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  position:relative;aspect-ratio:4/3;
}
.zig-img img{width:100%;height:100%;object-fit:cover}
.zig-num{
  position:absolute;top:1rem;left:1rem;
  background:color-mix(in oklch, white, transparent 8%);
  color:var(--primary);font-family:'Sora',sans-serif;font-weight:800;
  width:44px;height:44px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
}
.zig-txt h3{font-size:clamp(1.4rem,1.4vw + 1rem,1.85rem);margin-bottom:1rem}
.zig-txt p{color:var(--ink-soft)}
.zig-txt dl{margin-top:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.zig-txt dt{font-family:'Sora',sans-serif;font-weight:700;font-size:.92rem;color:var(--primary)}
.zig-txt dd{margin:.15rem 0 0;color:var(--ink-soft);font-size:.95rem}

@media(min-width:860px){
  .zig-row{grid-template-columns:1fr 1fr;gap:4rem}
  .zig-row.zig-rev .zig-img{order:2}
  .zig-row.zig-rev .zig-txt{order:1}
}


.crd-grid{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media(min-width:640px){.crd-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.crd-grid{grid-template-columns:repeat(4,1fr)}}

.crd{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:2rem 1.7rem;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.crd:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.crd-ico{
  width:52px;height:52px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:white;display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  margin-bottom:1.3rem;box-shadow:var(--shadow-sm);
}
.crd h3{font-size:1.15rem;margin-bottom:.9rem}
.crd dl{display:flex;flex-direction:column;gap:.55rem}
.crd dt{font-weight:600;font-size:.9rem;color:var(--ink)}
.crd dd{margin:.1rem 0 0;font-size:.87rem;color:var(--ink-soft)}


.sld-wrap{margin-top:var(--space-4)}
.sld-crd{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:2rem;height:100%;
  box-shadow:var(--shadow-sm);
}
.sld-crd .crd-ico{background:linear-gradient(135deg, var(--accent), var(--accent-2));}
.sld-crd h4{font-size:1.1rem;margin-bottom:.6rem}
.sld-crd p{color:var(--ink-soft);font-size:.94rem}
.splide__pagination__page{background:var(--border-strong)}
.splide__pagination__page.is-active{background:var(--accent)}
.splide__arrow{background:var(--surface);box-shadow:var(--shadow-sm)}
.splide__arrow svg{fill:var(--primary)}


.quote{
  max-width:820px;margin-inline:auto;text-align:center;
  padding:var(--space-4) var(--space-2);
}
.quote blockquote{
  font-family:'Sora',sans-serif;font-size:clamp(1.3rem,1.4vw + 1rem,1.9rem);
  font-weight:600;color:var(--ink);line-height:1.4;margin:0;
}
.quote cite{
  display:block;margin-top:1.4rem;font-style:normal;color:var(--ink-soft);font-size:.95rem;
}


.cta-band{
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, var(--primary), color-mix(in oklch, var(--primary), var(--secondary) 55%));
  color:white;padding:var(--space-5) var(--space-4);
  display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start;
  box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(500px 300px at 90% 0%, color-mix(in oklch, var(--accent), transparent 40%), transparent 70%);
}
.cta-band > *{position:relative;z-index:1}
.cta-band h2{color:white;font-size:clamp(1.7rem,2vw + 1rem,2.4rem);max-width:20ch}
.cta-band p{color:color-mix(in oklch, white, transparent 15%);max-width:55ch}
@media(min-width:860px){.cta-band{flex-direction:row;align-items:center;justify-content:space-between}}


.ftr{background:var(--surface-dark);color:color-mix(in oklch, white, transparent 10%);padding-block:var(--space-5) var(--space-3)}
.ftr-in{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:780px){.ftr-in{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ftr h4{color:white;font-size:1rem;margin-bottom:1.1rem}
.ftr-col ul{display:flex;flex-direction:column;gap:.65rem}
.ftr-col a{color:color-mix(in oklch, white, transparent 25%);font-size:.92rem;transition:color .25s var(--ease)}
.ftr-col a:hover{color:var(--accent)}
.ftr address{font-style:normal;color:color-mix(in oklch, white, transparent 25%);font-size:.92rem;display:flex;flex-direction:column;gap:.5rem}
.ftr-logo{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;font-family:'Sora',sans-serif;font-weight:700;color:white}
.ftr-desc{color:color-mix(in oklch, white, transparent 30%);font-size:.9rem;max-width:34ch}
.ftr-bottom{
  margin-top:var(--space-4);padding-top:1.6rem;border-top:1px solid color-mix(in oklch, white, transparent 88%);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
}
.ftr-bottom small{color:color-mix(in oklch, white, transparent 40%);font-size:.82rem}
.ftr-legal{display:flex;gap:1.3rem;flex-wrap:wrap}
.ftr-legal a{font-size:.82rem;color:color-mix(in oklch, white, transparent 30%)}
.ftr-legal a:hover{color:var(--accent)}


.pg-hero{
  padding-block:var(--space-6) var(--space-5);
  background:
    radial-gradient(900px 500px at 90% -20%, color-mix(in oklch, var(--secondary), transparent 60%), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
}
.pg-hero h1{font-size:clamp(2.1rem,3.4vw + 1rem,3.4rem);max-width:20ch}
.pg-hero p{margin-top:1.2rem;color:var(--ink-soft);font-size:1.1rem;max-width:56ch}
.pg-crumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.2rem;display:flex;gap:.5rem;align-items:center}
.pg-crumb a{color:var(--primary);font-weight:600}


.frm{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);padding:2.4rem;box-shadow:var(--shadow-md);
}
.frm-row{display:grid;grid-template-columns:1fr;gap:1.3rem}
@media(min-width:640px){.frm-row.frm-row--2{grid-template-columns:1fr 1fr}}
.frm-group{margin-bottom:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.frm-label{font-weight:600;font-size:.9rem;color:var(--ink)}
.frm-input,.frm-select,.frm-textarea{
  border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:.85rem 1rem;font-size:.96rem;color:var(--ink);background:var(--paper);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  min-height:44px;width:100%;
}
.frm-textarea{min-height:140px;resize:vertical}
.frm-input:focus,.frm-select:focus,.frm-textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in oklch, var(--primary), transparent 84%);
}
.frm-check{display:flex;align-items:flex-start;gap:.7rem;margin:1.5rem 0}
.frm-check input{margin-top:.3rem;width:20px;height:20px;flex-shrink:0}
.frm-check label{font-size:.88rem;color:var(--ink-soft)}
.frm-btn{width:100%;justify-content:center}
.iti{width:100%}
#phone{width:100%}


.acs-box{
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--radius-md);padding:1.6rem 1.8rem;display:flex;gap:1rem;
}
.acs-box i{color:var(--accent-2);font-size:1.4rem;margin-top:.15rem}


.map-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border-soft)}
.map-wrap iframe{width:100%;height:340px;border:0;display:block}


.legal{max-width:800px;margin-inline:auto}
.legal h2{font-size:1.5rem;margin-top:2.6rem;margin-bottom:1rem}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink-soft);margin-bottom:1.1rem}
.legal p strong{color:var(--ink)}
.legal .lst-letter,.legal .lst-num{padding-left:1.4rem;margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.5rem;color:var(--ink-soft)}
.legal small{display:block;margin-top:2.5rem;color:var(--ink-soft)}


.thanks-band{
  min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(135deg, var(--primary), color-mix(in oklch, var(--primary), var(--accent) 30%));
  color:white;border-radius:var(--radius-xl);margin-block:var(--space-4);padding:var(--space-6) var(--space-3);
  position:relative;overflow:hidden;
}
.thanks-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 20% 100%, color-mix(in oklch, var(--secondary), transparent 40%), transparent 70%)}
.thanks-in{position:relative;z-index:1;max-width:640px;margin-inline:auto}
.thanks-in h1{color:white;font-size:clamp(2.2rem,3.4vw + 1rem,3.6rem)}
.thanks-in p{color:color-mix(in oklch, white, transparent 12%);margin-top:1.3rem;font-size:1.15rem}
.thanks-in .btn{margin-top:2.2rem}


.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  display:none;
  background:var(--surface);border-top:1px solid var(--border-strong);
  box-shadow:0 -14px 40px color-mix(in oklch, var(--primary), transparent 85%);
}
.cookie-bar.is-visible{display:block;animation:cookieUp .5s var(--ease)}
@keyframes cookieUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cookie-in{display:flex;flex-direction:column}
@media(min-width:900px){.cookie-in{flex-direction:row}}
.cookie-left{padding:1.8rem 2rem;flex:1.2;border-bottom:1px solid var(--border-soft)}
.cookie-left h3{font-size:1.05rem;margin-bottom:.5rem}
.cookie-left p{color:var(--ink-soft);font-size:.9rem}
.cookie-left a{color:var(--primary);font-weight:600;text-decoration:underline}
@media(min-width:900px){.cookie-left{border-bottom:none;border-right:1px solid var(--border-soft)}}
.cookie-right{padding:1.8rem 2rem;flex:1}
.cookie-cats{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.3rem}
.cookie-cat{
  display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border-soft);padding:.4rem .8rem;border-radius:var(--radius-full);
}
.cookie-cat input{width:16px;height:16px}
.cookie-btns{display:flex;flex-wrap:wrap;gap:.8rem}
.cookie-btns .btn{padding:.7rem 1.3rem;font-size:.85rem}


.mt-0{margin-top:0}
.txt-center{text-align:center}
.abbr-u{text-decoration:underline dotted;cursor:help}
.figure-cap{margin-top:.7rem;font-size:.85rem;color:var(--ink-soft);text-align:center}

@media(max-width:640px){
  .container{padding-inline:1.15rem}
  .sec{padding-block:var(--space-5)}
  .cta-band{padding:var(--space-4) var(--space-3)}
}