/* White Lilies (HK) Supply chain Limited - Florist Cool Room theme */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --petal:#D96A8B;      /* lily petal rose */
  --card:#FFFFFF;       /* petal card raised panel */
  --mist:#EFF4EA;        /* cooler mist panel */
  --stem:#2B2E28;        /* stem ink body */
  --sage:#6E7664;        /* wrap sage muted */
  --thorn:#6B4A2E;       /* thorn brown tertiary */
  --leaf:#5A7A44;        /* stem green secondary */
  --ice:#B8D4CC;         /* chill ice tertiary */
  --hair:#E2E7DB;        /* hairline separator */
  --bg:#FBFBF7;          /* florist cooler */
  --bodytext:#43463E;    /* body text */
}
body{
  font-family:Georgia,'Times New Roman',serif;
  font-size:16px;
  line-height:1.75;
  background:#FBFBF7;
  color:#2B2E28;
  overflow-x:hidden;
}
img{max-width:100%;}
a{color:inherit;}

/* transport/sans headings */
h1,h2,h3,h4,h5{font-family:Arial,Helvetica,sans-serif;line-height:1.2;}
p{color:#43463E;}

/* ---------- NAVIGATION -------- */
.nav-main{display:flex;justify-content:space-between;align-items:center;}
.nav-main ul{display:flex;gap:26px;list-style:none;flex-wrap:wrap;}
.nav-main a{font-family:Arial,Helvetica,sans-serif;font-size:0.82rem;letter-spacing:0.12em;text-transform:uppercase;color:#2B2E28;text-decoration:none;padding-bottom:4px;}
.nav-main a:hover{color:#5A7A44;border-bottom:2px solid #5A7A44;}

/* brand glyph - five petal lily bloom */
.brand-petal{display:inline-block;width:14px;height:14px;position:relative;vertical-align:middle;}
.brand-petal b{position:absolute;border-radius:50% 50% 50% 50%;background:#D96A8B;display:block;}
.brand-petal b:nth-child(1){left:5px;top:0;width:7px;height:7px;border-radius:50% 90% 50% 90%;transform:rotate(90deg);}
.petal-glyph{position:relative;width:20px;height:20px;flex:0 0 auto;}
.petal-glyph i{position:absolute;display:block;border-radius:60% 60% 60% 60%;background:#D96A8B;width:9px;height:9px;}
.petal-glyph i:nth-child(1){top:6px;left:5px;border-radius:50%;width:10px;height:10px;background:#c8587b;}

/* ---------- DIAGONAL SECTIONS ------- */
.diag{position:relative;padding:64px 32px;}
.diag .inner{max-width:1080px;margin:0 auto;}
.diag-open{background:#FFFFFF;padding-top:36px;clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),0 100%);}
.diag-open .inner{padding-bottom:70px;}
.diag-buckets{
  background:#EFF4EA;
  margin-top:-52px;
  clip-path:polygon(0 52px,100% 0,100% calc(100% - 52px),0 100%);
  z-index:0;
}
.diag-open{z-index:2;}
.diag-grades{background:#FFFFFF;margin-top:-52px;clip-path:polygon(0 0,100% 52px,100% calc(100% - 40px),0 100%);}
.diag-note{margin-top:-40px;background:#D96A8B;clip-path:polygon(0 40px,100% 0,100% calc(100% - 40px),0 100%);}
.diag-foot{margin-top:-40px;background:#2B2E28;color:#FBFBF7;}

/* centered intro inside first panel */
.open-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.brandline{font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:1.15rem;letter-spacing:0.18em;color:#2B2E28;display:flex;align-items:center;gap:10px;}
.hero-center{text-align:center;padding:74px 10px 20px;}
.displayline{font-size:52px;font-weight:800;letter-spacing:-0.02em;color:#2B2E28;line-height:1.06;}
.displayline .rose{color:#D96A8B;}
.hero-sub{max-width:700px;margin:28px auto;font-size:1.08rem;color:#5b5f54;}
.cta-inline{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.cta-inline a{font-family:Arial,sans-serif;font-weight:bold;font-size:0.95rem;letter-spacing:0.05em;text-decoration:none;}
.cta-inline .go{color:#5A7A44;}
.cta-inline .go:hover{text-decoration:underline;}
.cta-inline .talk{color:#D96A8B;}
.cta-inline .talk:hover{text-decoration:underline;}

/* ---------- BUCKET STRIP ---------- */
.sect-title{font-size:1.3rem;color:#2B2E28;letter-spacing:0.02em;margin:0 0 8px;text-transform:uppercase;font-weight:800;}
.sect-note{color:#5b5f54;font-size:1rem;}
.bucket-stage{text-align:center;margin:14px auto 34px;max-width:300px;}
.bucket-stage h3{font-family:Arial,sans-serif;font-size:0.9rem;letter-spacing:0.1em;color:#D96A8B;text-transform:uppercase;margin-bottom:6px;}
.bucket-stage p{color:#5b5f54;}
.bucket-stage .arrow{color:#2B2E28;background:#FFFFFF;display:inline-block;padding:6px 14px;border-radius:30px;font-family:Arial;font-size:0.85rem;margin-top:12px;}

/* six buckets row */
.bucketrow{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;}
.bucket{flex:1;text-align:center;}
.bucket .col{width:38px;margin:0 auto;background:#5A7A44;border:2px solid #4a6636;position:relative;}
.bucket .lip{width:60px;margin:0 auto;height:16px;background:#6d8a55;border:2px solid#4a6636;border-radius:0 0 8px 8px;}
.kraft{background:#dfc9a3;color:#6B4A2E;font-family:Arial,sans-serif;font-size:0.7rem;padding:2px 8px;border-radius:2px;display:inline-block;margin-bottom:6px;letter-spacing:0.05em;}
.lily{width:44px;height:64px;margin:0 auto 8px;position:relative;}
.lily .stem{position:absolute;width:3px;background:#4a6636;bottom:2px;left:20px;height:100%;}
.lily .heart{position:absolute;border-radius:60% 40% 60% 40%;}
/* opening tiers vary by added classes on .col via heights */
.t1{height:60px;}.t2{height:84px;}.t3{height:104px;}.t4{height:120px;}.t5{height:120px;}.t6{height:104px;}
.stage-cap{font-family:Arial,sans-serif;font-size:0.68rem;color:#6E7664;letter-spacing:0.04em;margin-top:8px;text-transform:uppercase;}

.bench{border-top:14px solid #6B4A2E;height:18px;background:#7a5a38;margin-top:36px;border-radius:3px;position:relative;}
.mist{position:absolute;right:8%;top:-8px;width:12px;height:12px;background:#B8D4CC;border-radius:50%;box-shadow:14px -10px 0 #B8D4CC,-24px -6px 0 #B8D4CC;}

/* ---------- ZIGZAG GRADES ------- */
.grade-row{display:flex;align-items:center;gap:40px;padding:40px 0;}
.grade-row:nth-child(even){flex-direction:row-reverse;}
.grade-text{flex:1;}
.grade-text h3{font-family:Arial,sans-serif;font-size:1.5rem;color:#5A7A44;margin-bottom:10px;}
.grade-text p{color:#43463E;}
.grade-art{flex:1;display:flex;justify-content:center;}
.diag-art{background:#FBFBF7;border:1px solid #E2E7DB;border-radius:8px;max-width:400px;width:100%;padding:22px;}

/* grading board diagram */
.graddia{text-align:center;}
.graddia .head{font-family:Arial;color:#5A7A44;letter-spacing:0.1em;font-size:0.78rem;margin-bottom:14px;text-transform:uppercase;}
.circles{display:flex;justify-content:center;gap:20px;align-items:baseline;}
.circ{background:#D96A8B;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:Arial;font-size:0.72rem;}
.c1{width:40px;height:40px;}.c2{width:64px;height:64px;}.c3{width:88px;height:88px;}
.rodline{height:18px;border-left:2px solid #5A7A44;margin:0 auto;width:0;margin-top:6px;}
.sizecap{display:flex;justify-content:space-around;font-family:Arial;font-size:0.66rem;color:#6E7664;margin-top:10px;}

/* cold room door diag */
.colddoor{text-align:center;}
.doorframe{background:#5A7A44;border:6px solid #3f5a2f;border-radius:6px;padding:14px;position:relative;max-width:190px;margin:0 auto;}
.doorframe .handle{position:absolute;right:6px;top:50%;width:4px;height:34px;background:#EFF4EA;}
.doorframe .n{tobordercolor:#FFFFFF;}
.vent{background:#B8D4CC;height:10px;width:70%;margin:6px auto;border-radius:2px;}
.utils{height:26px;width:70%;margin:14px auto 4px;background:#3f5a2f;border-radius:2px;position:relative;}
.dial{position:absolute;left:8px;top:4px;width:16px;height:16px;border-radius:50%;background:#2B2E28;}
.templabel{font-family:Arial;font-size:0.7rem;color:#D96A8B;background:#FFFFFF;display:inline-block;padding:4px 12px;border-radius:20px;margin-top:10px;border:1px solid #E2E7DB;}

/* delivery bike */
.bikediv{text-align:center;position:relative;}
.bike{position:relative;width:170px;margin:10px auto 0;}
.bike .w1,.bike .w2{position:absolute;width:52px;height:52px;border:4px solid #6B4A2E;border-radius:50%;background:#eaece2;bottom:0;}
.bike .w1{left:6px;}.bike .w2{right:6px;}
.bike .hub{position:absolute;width:6px;height:6px;background:#2B2E28;border-radius:50%;}
.bike .frame{position:absolute;width:4px;height:44px;background:#5A7A44;transform:rotate(28deg);left:40px;top:-8px;}
.basket{position:absolute;right:16px;top:-26px;display:flex;align-items:baseline;gap:2px;}
.bou{position:absolute;right:2px;top:-34px;background:#D96A8B;width:8px;height:18px;border-radius:4px 4px 0 0;transform:rotate(12deg);}
.bou:before{position:absolute;bottom:-4px;left:2px;width:3px;height:12px;background:#4a6636;content:"";}
.bkb{width:44px;height:16px;background:#dfc9a3;position:absolute;right:14px;top:-12px;}
.track{font-family:Arial;font-size:0.7rem;color:#6E7664;letter-spacing:0.08em;text-transform:uppercase;margin-top:64px;}

/* ---------- PETAL NOTE --------- */
.diag-note{color:#fff;}
.diag-note .inner{text-align:center;padding:56px 20px;}
.note-title{font-family:Arial,sans-serif;font-weight:800;font-size:2rem;color:#fff;margin-bottom:14px;}
.note-body{font-size:1.15rem;color:#ffeef4;max-width:680px;margin:0 auto 14px;}
.note-link{display:inline-block;}
.note-link a{color:#fff;font-family:Arial;font-weight:bold;letter-spacing:0.08em;text-decoration:underline;text-underline-offset:5px;font-size:1rem;}
.note-link a:hover{color:#2B2E28;}

/* ---------- FOOTER ---------- */
.diag-foot{color:#FBFBF7;}
.diag-foot a{color:#FBFBF7;text-decoration:none;}
.diag-foot a:hover{color:#D96A8B;}
.foot-cols{display:flex;gap:40px;flex-wrap:wrap;}
.fcol{flex:1;min-width:150px;}
.fcol .brandline{color:#FFF;margin-bottom:8px;font-size:1.1rem;}
.fcol ul{list-style:none;}
.fcol li{margin:6px 0;font-family:Arial,sans-serif;font-size:0.95rem;}
.fcol .contact{color:#B8D4CC;font-family:Georgia;font-size:0.98rem;line-height:1.7;}
.foot-rule{border-top:1px solid #5A7A44;margin:30px 0 14px;}
.foot-legal{font-family:Arial,sans-serif;font-size:0.82rem;color:#A9B19b;line-height:1.7;}

/* ---------- GENERIC SUB PAGE --------- */
.page-open{background:#FFFFFF;padding:34px 32px 26px;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%);}
.page-open .inner{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.page-body{background:#FBFBF7;}
.page-block{max-width:1080px;margin:0 auto;padding:56px 24px 60px;}
.page-sect{margin-bottom:34px;}
.page-sect h2{font-family:Arial,sans-serif;font-size:1.7rem;color:#5A7A44;margin-bottom:12px;border-bottom:2px solid #5A7A44;padding-bottom:6px;display:inline-block;}
.page-sect h3{font-family:Arial,sans-serif;font-size:1.25rem;color:#2B2E28;margin:22px 0 8px;}
.page-sect p{margin-bottom:14px;color:#43463E;}
.page-sect ul{margin:0 0 16px 20px;color:#43463E;}
.page-sect li{margin-bottom:8px;}
.lead{font-size:1.1rem;color:#5A7A44;}

/* page tips / steps (services/contact reuse) */
.tipgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin:26px 0;}
.tipcard{background:#FFFFFF;border:1px solid #E2E7DB;border-top:4px solid #D96A8B;padding:20px 18px;border-radius:6px;}
.tipcard h3{font-family:Arial;font-size:1.02rem;color:#2B2E28;margin:0 0 8px;}
.tipcard p{color:#43463E;font-size:0.97rem;}
.mistcard{background:#EFF4EA;border:1px solid #E2E7DB;}
.ctaband{background:#5A7A44;color:#fff;padding:44px 24px;}
.ctaband .inner{max-width:1080px;margin:0 auto;text-align:center;}
.ctaband h2{color:#fff;font-size:1.8rem;margin-bottom:10px;}
.ctaband p{color:#EFF4EA;}
.ctaband .go{color:#fff;background:#2B2E28;display:inline-block;margin-top:14px;padding:12px 26px;border-radius:30px;font-family:Arial;font-weight:bold;text-decoration:none;}
.ctaband .go:hover{background:#D96A8B;}

/* process steps */
.stepflow{display:flex;flex-wrap:wrap;gap:14px;counter-reset:st;margin:20px 0;}
.step{flex:1;min-width:150px;background:#FFFFFF;border:1px solid #E2E7DB;border-radius:8px;padding:18px;position:relative;}
.step b{display:block;font-family:Arial;color:#D96A8B;font-size:0.8rem;letter-spacing:0.08em;margin-bottom:6px;}
.step span{font-family:Arial;color:#2B2E28;font-weight:bold;}
.step p{font-size:0.92rem;margin-top:6px;color:#43463E;}

/* contact form / info */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;}
.formfield{margin-bottom:18px;}
.formfield label{display:block;font-family:Arial,sans-serif;font-size:0.9rem;color:#2B2E28;margin-bottom:6px;font-weight:bold;}
.formfield input,.formfield textarea,.formfield select{width:100%;padding:12px 14px;border:1px solid #97A38B;border-radius:6px;background:#fff;font-family:Georgia,serif;font-size:1rem;color:#2B2E28;}
.formfield input:focus,.formfield textarea:focus{outline:2px solid #D96A8B;border-color:#D96A8B;}
.sendbtn{background:#5A7A44;color:#fff;font-family:Arial;font-weight:bold;letter-spacing:0.05em;border:none;padding:13px 30px;border-radius:30px;cursor:pointer;font-size:1rem;}
.sendbtn:hover{background:#D96A8B;}
.thank{display:none;background:#EFF4EA;border:1px solid #5A7A44;padding:18px;border-radius:6px;margin-top:18px;color:#5A7A44;font-weight:bold;}
.info-panel{background:#FFFFFF;border:1px solid #E2E7DB;border-radius:8px;padding:26px;margin-bottom:22px;}
.info-panel h3{font-family:Arial;color:#2B2E28;margin-bottom:8px;}
.info-panel p{color:#43463E;}
.info-panel .ph#tel{font-size:1.25rem;color:#5A7A44;font-weight:bold;}
.hours{width:100%;border-collapse:collapse;}
.hours td{padding:8px 4px;border-bottom:1px solid #E2E7DB;color:#43463E;font-size:0.96rem;}
.hours td:last-child{text-align:right;font-family:Arial;}
.faq-item{border-left:4px solid #D96A8B;background:#FFFFFF;padding:16px 18px;margin-bottom:14px;}
.faq-item h3{font-size:1.05rem;color:#2B2E28;}
.faq-item p{color:#43463E;}

/* legal TOC link in footer/pages generic space */
.toplink{text-align:right;}
.toplink a{color:#5A7A44;font-family:Arial;font-weight:bold;text-decoration:none;}
.toplink a:hover{text-decoration:underline;}

/* ---------- MOBILE NAV --------- */
.mnav-toggle{display:none;background:none;border:1px solid #2B2E28;color:#2B2E28;font-family:Arial;font-size:0.9rem;padding:8px 14px;border-radius:4px;cursor:pointer;letter-spacing:0.05em;}
@media (max-width:760px){
  .mnav-toggle{display:inline-block;}
  .nav-main .links{display:none;width:100%;flex-direction:column;gap:0;}
  .nav-main.open .links{display:flex;}
  .nav-main ul{flex-direction:column;gap:0;}
  .nav-main li{padding:8px 0;border-bottom:1px solid #E2E7DB;}
  .open-head{flex-direction:column;align-items:flex-start;}
  .displayline{font-size:34px;}
  .bucketrow{flex-wrap:nowrap;overflow-x:auto;}
  .grade-row,.grade-row:nth-child(even){flex-direction:column;gap:24px;}
  .contact-grid{grid-template-columns:1fr;}
  .foot-cols{flex-direction:column;gap:28px;}
  .diag{padding:44px 20px;}
}
.no-js .mnav-toggle{display:none;}