@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --cream:  #faf7f2;
  --white:  #ffffff;
  --coral:  #ff6f61;
  --teal:   #67b8b1;
  --mustard:#d6b73f;
  --navy:   #25324a;
  --ink:    #3c3c3c;
  --mid:    rgba(60,60,60,.6);
  --line:   rgba(60,60,60,.09);
  --sh:     0 4px 18px rgba(60,60,60,.08);
  --sh-lg:  0 12px 38px rgba(60,60,60,.12);
  --r:      16px;
  --max:    1020px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:'DM Serif Display',serif;color:var(--ink);margin:0;line-height:1.05}
p{color:var(--mid)}
.wrap{width:min(calc(100% - 2rem),var(--max));margin-inline:auto}

/* sway: each flower uses this via inline style duration/delay */
@keyframes sway{
  0%,100%{transform:rotate(0deg) translateY(0)}
  30%    {transform:rotate(5deg) translateY(-10px)}
  65%    {transform:rotate(-4.5deg) translateY(-5px)}
}

/* ── Nav ── */
.nav{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(105deg,
    rgba(255,111,97,.32) 0%,rgba(214,183,63,.22) 28%,
    rgba(103,184,177,.30) 58%,rgba(201,184,232,.25) 82%,
    rgba(255,111,97,.20) 100%);
  background-size:300% 300%;
  animation:navwash 14s ease-in-out infinite;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(103,184,177,.25);
}
@keyframes navwash{
  0%{background-position:0% 40%}50%{background-position:80% 60%}100%{background-position:0% 40%}
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:1rem}
.brand{font-family:'DM Serif Display',serif;font-style:italic;font-size:1rem;color:var(--ink);display:flex;align-items:center;gap:.48rem;flex-shrink:0}
.nl{display:flex;align-items:center;gap:.2rem;list-style:none}
.nl li{display:flex;align-items:center}
.nl li+li::before{
  content:'';display:inline-block;width:15px;height:15px;margin:0 .48rem;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cellipse cx='50' cy='30' rx='8' ry='20' fill='%23f2a7b8' opacity='.65' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='20' fill='%23c9b8e8' opacity='.65' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='20' fill='%239dd4e8' opacity='.65' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='20' fill='%23f0d97a' opacity='.65' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='20' fill='%23a8dbc5' opacity='.65' transform='rotate(288 50 50)'/%3E%3Ccircle cx='50' cy='50' r='7' fill='%23d6b73f'/%3E%3Ccircle cx='50' cy='50' r='3' fill='white' opacity='.7'/%3E%3C/svg%3E")
  no-repeat center/contain;
}
.nl a{font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--ink);position:relative;padding-bottom:2px;transition:color .18s;white-space:nowrap}
.nl a::after{content:'';position:absolute;bottom:0;left:0;right:100%;height:1.5px;background:var(--coral);transition:right .22s}
.nl a:hover,.nl a.on{color:var(--coral)}
.nl a:hover::after,.nl a.on::after{right:0}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.38rem;padding:.63rem 1.25rem;border-radius:999px;font-family:'Poppins',sans-serif;font-size:.81rem;font-weight:700;border:1.5px solid transparent;cursor:pointer;transition:all .18s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.bp{background:var(--coral);color:#fff;box-shadow:0 4px 14px rgba(255,111,97,.27)}
.bp:hover{background:#e85e52}
.bs{background:var(--white);color:var(--ink);border-color:var(--line);box-shadow:var(--sh)}
.bs:hover{border-color:var(--teal);color:var(--teal)}
.bt{background:var(--teal);color:#fff;box-shadow:0 4px 14px rgba(103,184,177,.25)}
.bt:hover{background:#58a49d}
.bm{background:var(--mustard);color:#fff;box-shadow:0 4px 14px rgba(214,183,63,.25)}
.bm:hover{background:#c0a52e}

/* ── Band ── */
.band{overflow:hidden;background:var(--navy);padding:.5rem 0}
.bt2{display:flex;gap:2rem;animation:scroll 20s linear infinite;width:max-content}
.bt2 span{font-size:.67rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.42)}
.bt2 .dot{color:var(--coral)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ── Hero ── */
.hero{padding:4rem 0 3.5rem;background:var(--cream);position:relative;overflow:hidden}
.hg{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,5vw,4.6rem);line-height:.96;margin:.55rem 0 .95rem;letter-spacing:-.01em}
.hero h1 em{color:var(--coral);font-style:italic}
.hero .sub{font-size:.92rem;max-width:430px;margin-bottom:1.5rem}
.acts{display:flex;gap:.65rem;flex-wrap:wrap}

.hcw{position:relative}
.hc{background:var(--white);border-radius:22px;overflow:hidden;box-shadow:var(--sh-lg);transform:rotate(-1.5deg);position:relative;z-index:2}
.hcb{position:absolute;top:10px;right:-10px;left:10px;bottom:-10px;background:rgba(103,184,177,.17);border-radius:22px;transform:rotate(2deg);z-index:1}
.hci{height:230px;background:linear-gradient(145deg,#fce8ee,#ede8f8 48%,#daf0f5);display:flex;align-items:center;justify-content:center}
.hcf{padding:1.1rem 1.4rem 1.4rem}
.hcf h3{font-size:1.1rem;margin-bottom:.17rem}
.hcf p{font-size:.76rem}
.spin{position:absolute;top:-10px;right:1.2rem;z-index:10;width:70px;height:70px;border-radius:50%;background:var(--coral);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(255,111,97,.28);animation:rot 18s linear infinite}
.sin{font-size:.47rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:center;color:#fff;line-height:1.3;animation:rot 18s linear reverse infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── Page hero ── */
.ph{padding:3rem 0 5.5rem;background:var(--cream);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.ph h1{font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:.97;margin:.5rem 0 .8rem;letter-spacing:-.01em}
.ph h1 em{color:var(--coral);font-style:italic}
.ph>.wrap>p{font-size:.9rem;max-width:480px}

/* ── Sections ── */
.sec{padding:3.5rem 0}
.sec.alt{background:#f3ede4}
.sh{margin-bottom:1.9rem}
.sh h2{font-size:clamp(1.75rem,3.2vw,2.6rem);margin:.32rem 0 .48rem}
.sh p{font-size:.9rem;max-width:490px}
.sh2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:end;margin-bottom:1.9rem}
.sh2 p{font-size:.9rem}

/* ── Cards ── */
.grid{display:grid;gap:1rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--line);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.cb{padding:1.2rem 1.3rem 1.4rem;flex:1;display:flex;flex-direction:column}
.cb h3{font-size:1.2rem;margin:.18rem 0 .36rem}
.cb>p{font-size:.83rem;flex:1;margin-bottom:.85rem}
.card.sk{border-top:3px solid var(--coral)}
.card.st{border-top:3px solid var(--teal)}
.card.sm{border-top:3px solid var(--mustard)}
.card.sb{border-top:3px solid #c9b8e8}
.card.sd{border-top:3px solid #9dd4e8}
.aico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:.6rem}
.ic{background:rgba(255,111,97,.09)}.it{background:rgba(103,184,177,.1)}.im{background:rgba(214,183,63,.1)}.id{background:rgba(175,199,216,.14)}
.tag{font-size:.63rem;font-weight:700;letter-spacing:.06em;padding:.17rem .58rem;border-radius:999px;display:inline-block;background:rgba(103,184,177,.11);color:var(--teal)}
.tag.k{background:rgba(255,111,97,.1);color:var(--coral)}
.tag.m{background:rgba(214,183,63,.11);color:#8a7010}
.tag.pl{background:rgba(201,184,232,.18);color:#6a4aaa}
.tag.gr{background:rgba(168,219,197,.18);color:#2e7a5c}
.ey{display:inline-block;padding:.22rem .72rem;border-radius:999px;background:rgba(103,184,177,.12);font-size:.69rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--teal)}
.ey.k{background:rgba(255,111,97,.1);color:var(--coral)}

/* ── Guide table ── */
.gt{background:var(--white);border-radius:18px;overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line)}
.gr{display:grid;grid-template-columns:1.1fr 1.8fr .7fr;gap:.8rem;padding:.88rem 1.2rem;border-bottom:1px solid var(--line);align-items:center;transition:background .12s}
.gr:last-child{border-bottom:none}
.gr:not(.grh):hover{background:rgba(103,184,177,.04)}
.grh{background:var(--navy);color:var(--cream);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em}
.grh *{color:inherit}
.gr .ti{font-family:'DM Serif Display',serif;font-size:.92rem;color:var(--ink)}
.gr .de{font-size:.79rem}
.gr.star{border-left:3px solid var(--coral);background:rgba(255,111,97,.025)}

/* ── Feature band ── */
.fb{background:var(--navy);border-radius:22px;padding:2.2rem 2.4rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.fb::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 46%,rgba(103,184,177,.12) 0%,transparent 52%),radial-gradient(circle at 16% 78%,rgba(255,111,97,.07) 0%,transparent 48%)}
.fb h2{color:var(--cream);font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.6rem}
.fb>div>p{color:rgba(250,247,242,.66);font-size:.9rem}
.artbox{min-height:200px;border-radius:16px;background:linear-gradient(145deg,#fce8ee,#f0ebff 50%,#daf0f0);border:1px solid rgba(255,255,255,.32);position:relative;overflow:visible}

/* ── CTA ── */
.cta{background:linear-gradient(135deg,rgba(103,184,177,.11),rgba(175,199,216,.13));border-radius:22px;padding:2.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.cta h2{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:.42rem}
.cta>p{font-size:.9rem;max-width:360px}
.ctab{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}

/* ── Contact ── */
.cl{display:grid;grid-template-columns:1.35fr .65fr;gap:2.4rem;align-items:start}
.fp{background:var(--white);border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg)}
.fph{background:var(--navy);padding:.88rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.fph span{font-family:'DM Serif Display',serif;font-size:.98rem;color:#fff;font-style:italic}
.fdots{display:flex;gap:.32rem}
.fdot{width:8px;height:8px;border-radius:50%}
.fbd{padding:1.5rem;display:grid;gap:.8rem}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.fld label{display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:.25rem}
.fld input,.fld textarea,.fld select{width:100%;padding:.68rem .88rem;border:1.5px solid var(--line);border-radius:11px;font-family:'Poppins',sans-serif;font-size:.83rem;color:var(--ink);background:var(--cream);outline:none;transition:border-color .17s}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--teal)}
.fld textarea{min-height:110px;resize:vertical}
.ci h3{font-size:1.4rem;font-style:italic;margin-bottom:1rem}
.cii{padding:.68rem 0;border-bottom:1px solid var(--line)}
.cii .lb{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:.13rem}
.cii .vl{font-size:.87rem;font-weight:500;color:var(--ink)}
.sr{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1.1rem}
.sp{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .82rem;border-radius:999px;border:1.5px solid var(--line);font-size:.77rem;font-weight:600;background:var(--white);transition:all .16s}
.sp:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-2px)}
.sp svg{width:14px;height:14px}

/* ── Footer ── */
.footer{padding:1.4rem 0 1.9rem;border-top:1px solid var(--line)}
.fr3{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fbrand{font-family:'DM Serif Display',serif;font-style:italic;font-size:1.03rem;color:var(--ink)}
.flinks{display:flex;gap:.9rem}
.flinks a{font-size:.75rem;font-weight:600;color:var(--mid);transition:color .17s}
.flinks a:hover{color:var(--coral)}
.fcopy{font-size:.69rem;color:rgba(60,60,60,.28)}

/* ── Responsive ── */
@media(max-width:820px){
  .hg,.fb,.cl,.sh2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr 1fr}
  .hero{padding:2.6rem 0}
  .ph{padding-bottom:4.5rem}
}
@media(max-width:560px){
  .g3,.g2{grid-template-columns:1fr}
  .gr{grid-template-columns:1fr}
  .grh{display:none}
  .fr2{grid-template-columns:1fr}
  .cta{padding:1.5rem;flex-direction:column}
  .fr3{display:block}
  .flinks{margin-top:.45rem}
}