/* Durga Enterprises — shared styles */
:root{
  --ink:#361708;
  --ink-soft:#7A5840;
  --copper:#D2561F;
  --copper-dark:#A33E0E;
  --cream:#FFFAF6;
  --sand:#FBEDE2;
  --sand-deep:#F2D7C3;
  --line:rgba(54,23,8,.15);
  --brown:#43180A;
  --title:#FF4F00;        /* Aerospace orange — section titles */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;color:var(--copper);margin:0 0 1rem;font-weight:500}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.12;color:var(--title)}
.price-page h1,.letter-page h1{color:var(--title)}
/* headings that sit inside a coloured panel keep their own colour */
.j-plate h3,.enquiry h2,.enq-head h2{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* image slots: show a warm tone until real photos are added */
.photo{background:linear-gradient(135deg,#C08457,#4A1D0B);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}

/* ---------- header ---------- */
/* A band of its own above the hero, not floating over the photo. */
.site-head,.site-head.solid{position:sticky;top:0;z-index:50;
  background:var(--copper);color:#fff;border-bottom:0;backdrop-filter:none}
.head-inner{display:flex;align-items:center;gap:24px;padding-block:22px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.mark{width:46px;height:46px;flex:none;background:#fff;color:var(--copper);display:grid;place-items:center;
  font-family:var(--serif);font-size:1.7rem;line-height:1}
.brand-name{display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.15}
.brand-sub{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.nav{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
.nav a,.nav button{font:inherit;font-size:1rem;color:inherit;text-decoration:none;background:none;border:0;cursor:pointer;padding:6px 0}
.nav a:hover,.nav button:hover{color:#fff;opacity:.74}
.nav a[aria-current="page"]{color:#fff;border-bottom:2px solid #fff}
.dropdown{position:relative}
.dropdown button::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.menu{position:absolute;top:100%;left:-16px;min-width:230px;background:var(--cream);color:var(--ink);
  list-style:none;margin:8px 0 0;padding:8px 0;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s}
.menu a{display:block;padding:10px 18px}
.dropdown:hover .menu,.dropdown:focus-within .menu,.dropdown.open .menu{opacity:1;visibility:visible;transform:none}
.nav-toggle{display:none;background:none;border:0;color:inherit;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100vh - 90px);display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.hero .hero-slider{position:absolute;inset:0}
.hero .slide{height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,16,6,.40) 0%,rgba(36,14,5,.54) 45%,rgba(20,7,2,.90) 100%)}
.hero-content{position:relative;z-index:2;padding-top:70px;padding-bottom:80px}
.hero .eyebrow{color:var(--copper)}
.hero h1{font-size:clamp(2.8rem,8.4vw,7.2rem);line-height:1.02;margin:0 0 2.2rem}
.hero h1 span{display:block;color:var(--copper)}
.hero p{max-width:40rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:rgba(255,255,255,.88);margin:0 0 2.6rem}
.btns{display:flex;flex-wrap:wrap;gap:16px}
.btn{display:inline-block;padding:16px 36px;font-weight:600;letter-spacing:.02em;text-decoration:none;border:1px solid transparent}
.btn-solid{background:var(--copper);color:#fff}
.btn-solid:hover{background:var(--copper-dark)}
.btn-ghost{border-color:rgba(255,255,255,.75);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ---------- sections ---------- */
section.block{padding-block:clamp(72px,10vw,120px)}
.alt{background:var(--sand)}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,110px);align-items:start}
.about-grid .photo{aspect-ratio:4/5}
.about .kicker{font-size:.95rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.4rem}
.about h2{margin-bottom:2.2rem}
.about p{color:var(--ink-soft);margin:0 0 1.6rem}
.about p strong{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line);margin-top:2.6rem;padding-top:2.6rem}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:2.6rem;line-height:1.1}
.stat span{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* business */
.section-intro{max-width:46rem;color:var(--ink-soft);font-size:1.12rem;margin:1.6rem 0 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,6vw,64px);background:var(--sand-deep);gap:1px;border:1px solid var(--line)}
.card{background:var(--cream);padding:clamp(28px,4vw,48px)}
.card svg{width:30px;height:30px;stroke:var(--copper);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.65rem;margin:2rem 0 .9rem}
.card p{margin:0;color:var(--ink-soft);font-size:.98rem}
.card.empty{background:var(--sand-deep)}

/* leaf grades */
.leaf-slider{height:clamp(240px,34vw,400px);margin-top:clamp(36px,5vw,60px);--per:3}
.leaf-slider .slide{height:100%}
.leaf-slider .slide:nth-child(3n+2){background:linear-gradient(135deg,#D79A6E,#5C2410)}
.leaf-slider .slide:nth-child(3n){background:linear-gradient(135deg,#E8A05A,#8A3A14)}

/* ---------- sliders (hero + leaf) ---------- */
.slider{position:relative;overflow:hidden}
.slides{display:flex;height:100%;transition:transform .9s cubic-bezier(.65,0,.35,1);will-change:transform}
.slide{flex:0 0 calc(100% / var(--shown,var(--per,1)));min-width:0}
.slider.single .arrow,.slider.single .dots{display:none}
.hero-slider .slide:nth-child(2){background:linear-gradient(135deg,#7A4A2A,#2A1008)}
.hero-slider .slide:nth-child(3){background:linear-gradient(135deg,#9C5C30,#38150A)}
.dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:10px;z-index:2}
.dots button{width:28px;height:3px;padding:0;border:0;background:rgba(255,255,255,.45);cursor:pointer;transition:background .3s}
.dots button[aria-current="true"]{background:#fff}
.hero-slider .dots{bottom:28px;z-index:3}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,250,246,.85);color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding-bottom:4px}
.arrow:hover{background:#fff}
.arrow.prev{left:14px}.arrow.next{right:14px}
@media (prefers-reduced-motion:reduce){.slides{transition:none}}

.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sand-deep)}
.grade{background:var(--cream);padding:clamp(28px,4vw,48px) clamp(24px,4vw,48px)}
.grade h3{color:var(--copper);font-size:1.9rem;margin:0 0 1rem}
.grade p{margin:0;color:var(--ink-soft)}
.grade.empty{background:var(--sand-deep)}

/* "See our pricing" link */
.see-pricing-wrap{margin:clamp(36px,5vw,52px) 0 0}
.see-pricing{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.75rem);color:var(--copper);
  border-bottom:2px solid transparent;padding-bottom:6px;transition:border-color .2s,color .2s}
.see-pricing svg{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s ease}
.see-pricing:hover{color:var(--copper-dark);border-bottom-color:currentColor}
.see-pricing:hover svg{transform:translateX(7px)}
@media (prefers-reduced-motion:reduce){.see-pricing svg{transition:none}}

/* clients */
.clients{text-align:center;padding-block:clamp(56px,7vw,90px)}
.client-row{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;margin-top:2.6rem}
.client{padding:8px 24px}
.client+.client{border-left:1px solid var(--line)}
.client b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.6vw,3rem);line-height:1.15}
.client span{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* testimonials */
.marquee{overflow:hidden;margin-top:clamp(40px,6vw,70px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:56px;width:max-content;animation:scroll 60s linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(calc(-50% - 28px))}}
.quote{width:min(520px,80vw);flex:none;border-top:2px solid var(--copper);padding-top:28px}
.quote svg{width:22px;height:28px;stroke:var(--copper);fill:none;stroke-width:1.6}
.quote blockquote{margin:1.4rem 0 2rem;font-family:var(--serif);font-size:1.45rem;line-height:1.5}
.quote cite{font-style:normal;display:block;font-weight:500}
.quote cite span{display:block;font-weight:400;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){
  .track{animation:none;flex-wrap:wrap;width:auto}
  .track [aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- pricing page ---------- */
.price-page{padding-block:clamp(48px,7vw,84px)}
.price-page h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;margin:0 0 1.4rem}
.price-intro{max-width:52rem;color:var(--ink-soft);font-size:1.08rem;margin:0}
.products{margin-top:clamp(40px,6vw,64px);display:grid;gap:clamp(28px,4vw,44px)}
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);
  align-items:start;background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,34px);scroll-margin-top:100px}
.product-gallery{align-self:start;position:sticky;top:100px}
.product-photo{aspect-ratio:4/3;width:100%}
.photo-strip{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.photo-thumb{width:72px;height:56px;padding:0;border:1px solid var(--line);background:none;cursor:pointer;
  overflow:hidden;flex:none;line-height:0;transition:border-color .15s}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.photo-thumb:hover{border-color:var(--copper)}
.photo-thumb.on{border-color:var(--copper);box-shadow:inset 0 0 0 2px var(--copper)}

.product-body{display:flex;flex-direction:column;align-items:flex-start}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1rem}
.badge{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:7px 12px;line-height:1}
.badge-key{color:var(--copper);border:1px solid var(--copper)}
.badge-dark{background:var(--ink);color:var(--cream)}
.product-body h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:.7rem}
.product-desc{color:var(--ink-soft);margin:0 0 1.6rem;max-width:44rem}

/* leaf-body scale */
.meter{width:100%;margin:0 0 1.6rem}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.meter-head span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.meter-head b{font-weight:600;font-size:.95rem}
.meter-bar{position:relative;height:8px;background:var(--sand-deep)}
.meter-bar i{position:absolute;top:-2px;width:14px;height:12px;background:var(--copper);transform:translateX(-50%)}
.meter-scale{display:flex;justify-content:space-between;margin-top:6px;font-size:.75rem;color:var(--ink-soft)}

/* spec rows */
.spec-rows{margin:0 0 1.6rem;padding:0;width:100%;max-width:34rem}
.spec-rows > div{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.spec-rows > div:first-child{border-top:1px solid var(--line)}
.spec-rows dt{color:var(--ink-soft);font-size:.95rem;margin:0}
.spec-rows dd{margin:0;font-size:.95rem}

/* price */
.price-block{width:100%;max-width:34rem;margin:0 0 1.5rem;padding:16px 18px;background:var(--sand);border-left:4px solid var(--copper)}
.price-label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.price-line{margin:.2rem 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-figure{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.15}
.price-unit{font-size:.9rem;color:var(--ink-soft)}
.price-foot{margin:.35rem 0 0;font-size:.82rem;color:var(--ink-soft)}

/* form + quantity */
.choices{display:flex;flex-wrap:wrap;gap:20px 32px;margin:0 0 1.6rem;width:100%}
.choice-label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{font:inherit;font-size:.95rem;font-weight:500;padding:11px 20px;background:#fff;color:var(--ink);
  border:1px solid var(--line);cursor:pointer;transition:border-color .15s,background .15s}
.pill:hover{border-color:var(--copper)}
.pill[aria-pressed="true"]{border-color:var(--copper);background:var(--copper);color:#fff}
.qty{font:inherit;font-size:.95rem;padding:11px 14px;min-width:14rem;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:0}
.qty:focus,.pill:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.product-body .btn{border:0;cursor:pointer;font-size:1rem;padding:15px 38px}
.price-note{margin-top:clamp(40px,5vw,60px);max-width:52rem}
.price-note h3{font-size:1.5rem;margin-bottom:.8rem}
.price-note p{color:var(--ink-soft);margin:0 0 1.2rem}

/* contact + footer */
.contact{background:var(--brown);color:#fff;padding-top:clamp(72px,10vw,120px)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px)}
.contact h2{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:1.6rem}
.contact p{color:rgba(255,255,255,.72);max-width:28rem;margin:0}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;gap:22px;padding-block:0 30px;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,.14)}
.contact-list li:last-child{border:0;margin:0}
.contact-list svg{width:26px;height:26px;flex:none;stroke:var(--copper);fill:none;stroke-width:1.6;margin-top:4px}
.contact-list small{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.contact-list a,.contact-list address{font-style:normal;font-size:1.2rem;text-decoration:none;overflow-wrap:anywhere}
.contact-list a:hover{color:var(--copper)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.14);
  margin-top:clamp(56px,8vw,100px);padding-block:32px;font-size:.9rem;color:rgba(255,255,255,.62)}

/* chat button */
.chat{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;
  background:#5FCB6E;color:#fff;text-decoration:none;font-weight:600;font-size:1.05rem;padding:14px 26px;border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);transition:opacity .2s}
.chat:hover{background:#4DB85C}
.chat svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}

/* chairman page */
.letter-page{padding-block:clamp(56px,8vw,100px)}
.letter-page h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.08;margin:0 0 clamp(36px,5vw,60px)}
.letter{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.letter .photo{aspect-ratio:4/5}
.letter figure{margin:0}
.letter figcaption{margin-top:16px}
.letter figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:1.3rem}
.letter figcaption span{font-size:.9rem;color:var(--ink-soft)}
.letter-body p{margin:0 0 1.4em;max-width:64ch;color:var(--ink-soft);font-size:1.08rem}
.letter-body p:first-child::first-letter{font-family:var(--serif);font-size:3.8rem;line-height:.85;float:left;padding:.06em .12em 0 0;color:var(--copper)}
.signoff{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink)!important;
  border-top:1px solid var(--line);padding-top:1.6rem;margin-top:2.4rem}
.back{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.back:hover{border-color:var(--copper)}
.site-foot-plain{background:var(--brown);color:rgba(255,255,255,.62)}
.site-foot-plain .foot{margin:0;border:0}

/* ---------- enquiry pop-up ---------- */
.enquiry{position:fixed;inset:auto 24px 24px auto;margin:0;z-index:70;
  width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;
  padding:0;border:0;background:var(--cream);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.28);
  opacity:0;transform:translateY(24px);transition:opacity .3s ease,transform .3s ease}
.enquiry.in{opacity:1;transform:none}
body.enq-open .chat{opacity:0;pointer-events:none}
.enq-body{padding:clamp(22px,4vw,32px);border-top:4px solid var(--copper)}
.enquiry h2{font-size:clamp(1.7rem,4vw,2.2rem);margin-bottom:.5rem}
.enq-intro{color:var(--ink-soft);margin:0 0 1.4rem;font-size:.95rem}
.enq-close{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;background:none;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--ink-soft)}
.enq-close:hover{color:var(--ink)}
.enquiry form{display:grid;gap:12px}
.enquiry label{display:grid;gap:6px;font-size:.88rem;font-weight:500}
.enquiry input,.enquiry select,.enquiry textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  padding:11px 12px;width:100%;border-radius:0}
.enquiry textarea{resize:vertical;min-height:84px}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:2px solid var(--copper);outline-offset:0;border-color:var(--copper)}
.enquiry .invalid{border-color:#B3261E;background:#FFF6F5}
.phone-row{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.enq-error{margin:0;color:#B3261E;font-size:.9rem}
.enq-submit{width:100%;border:0;cursor:pointer;font-size:1rem}
.enq-submit[disabled]{opacity:.6;cursor:wait}
.enq-ok{border:0;cursor:pointer}
.open-enquiry{border:0;cursor:pointer;font-size:1rem}
.req{color:#B3261E;font-weight:600;margin-left:2px}
@media (prefers-reduced-motion:reduce){.enquiry{transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .product{grid-template-columns:1fr;gap:24px}
  .product-gallery{position:static}
  .product-photo{aspect-ratio:16/9}
}
@media (max-width:900px){
  .cards,.grades{grid-template-columns:repeat(2,1fr)}
  .leaf-slider{--per:2}
  .card.empty,.grade.empty{display:none}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .about-grid .photo{max-width:520px}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .site-head .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream);color:var(--ink);padding:8px 24px 20px;border-bottom:1px solid var(--line);display:none}
  .site-head.nav-open .nav{display:flex}
  .nav li{width:100%;border-bottom:1px solid var(--line)}
  .nav a,.nav button{display:block;padding:14px 0;width:100%;text-align:left}
  .nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--line)}
  /* the phone menu drops onto a cream panel, so links go back to dark */
  .site-head .nav a:hover,.site-head .nav button:hover{color:var(--copper);opacity:1}
  .menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;margin:0;padding:0 0 8px 14px;display:none}
  .dropdown.open .menu{display:block}
  .cards,.grades,.client-row,.stats{grid-template-columns:1fr}
  .stats{gap:20px}
  .client+.client{border-left:0;border-top:1px solid var(--line);padding-top:24px;margin-top:16px}
  .leaf-slider{--per:1;height:auto}
  .leaf-slider .slide{aspect-ratio:4/3;height:auto}
  .letter{grid-template-columns:1fr}
  .letter .photo{max-width:260px}
  /* On phones the chat button becomes a small circle so it does not sit on
     top of the page's own buttons. */
  .chat{right:16px;bottom:16px;padding:0;width:54px;height:54px;justify-content:center;gap:0}
  .chat span.chat-label{display:none}
  .chat svg{width:26px;height:26px}
  .hero-slider .dots{justify-content:flex-start;padding-left:24px}
  .product{padding:16px}
  .product-photo{aspect-ratio:4/3}
  .spec-rows > div{grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:12px}
  .choices{gap:16px}
  .qty{min-width:0;width:100%}
  .choice{width:100%}
  .product-body .btn{width:100%;text-align:center}
  .enquiry{inset:auto 12px 12px 12px;width:auto;max-height:82vh}
}

/* ---------- admin + login (admin.php) ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--sand)}
.login-box{background:var(--cream);border-top:4px solid var(--copper);box-shadow:0 18px 50px rgba(0,0,0,.12);
  padding:clamp(28px,5vw,44px);width:min(420px,100%)}
.login-box h1{font-size:2rem;margin-bottom:.5rem}
.login-box .lead{color:var(--ink-soft);font-size:.95rem;margin:0 0 1.6rem}
.login-box label{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.login-box input{font:inherit;font-size:1rem;width:100%;padding:12px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0;margin-bottom:20px}
.login-box input:focus{outline:2px solid var(--copper);border-color:var(--copper)}
.login-box .btn{width:100%;border:0;cursor:pointer;font-size:1rem}
.login-error{background:#FDECEA;border-left:4px solid #B3261E;padding:12px 16px;margin:0 0 1.2rem;font-size:.95rem}

.admin{max-width:860px;margin:0 auto;padding:clamp(32px,6vw,64px) 24px}
.admin-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.admin h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:.6rem}
.admin .lead{color:var(--ink-soft);margin:0 0 2rem}
.admin table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
.admin th,.admin td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.admin thead th{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;background:var(--sand)}
.admin tbody th{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--copper);width:8rem}
.admin input[type=text],.admin textarea{font:inherit;font-size:1rem;width:100%;padding:10px 12px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0}
.admin input:focus,.admin textarea:focus{outline:2px solid var(--copper);border-color:var(--copper)}
.note-box{margin-top:28px}
.note-box label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.note-box textarea{min-height:110px;resize:vertical}
.actions{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.actions .btn{border:0;cursor:pointer}
.saved{background:#E8F3E9;border-left:4px solid #3E8E41;padding:14px 18px;margin:0 0 1.6rem}
.failed{background:#FDECEA;border-left:4px solid #B3261E;padding:14px 18px;margin:0 0 1.6rem}
.tips{margin-top:40px;border-top:1px solid var(--line);padding-top:24px;color:var(--ink-soft);font-size:.95rem}
.tips li{margin-bottom:8px}
.enquiries{margin-top:56px;border-top:1px solid var(--line);padding-top:32px}
.enq-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.enq-head h2{font-size:clamp(1.5rem,3vw,2rem)}
.btn-ghost-dark{display:inline-block;padding:11px 20px;border:1px solid var(--line);text-decoration:none;font-size:.92rem;font-weight:500;background:#fff}
.btn-ghost-dark:hover{border-color:var(--copper);color:var(--copper)}
.empty{color:var(--ink-soft);background:var(--sand);padding:18px 20px;margin:0}
.enq-card{background:#fff;border:1px solid var(--line);padding:18px 20px;margin-bottom:12px}
.enq-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.enq-top b{font-size:1.1rem}
.enq-when{display:block;font-size:.8rem;color:var(--ink-soft);letter-spacing:.04em}
.warn{color:#B3261E}
.link-btn{background:none;border:0;padding:0;font:inherit;font-size:.85rem;color:var(--ink-soft);cursor:pointer;text-decoration:underline}
.link-btn:hover{color:#B3261E}
.enq-contact{margin:.6rem 0 .8rem;font-size:.92rem}
.enq-contact a{color:var(--copper);text-decoration:none}
.enq-contact a:hover{text-decoration:underline}
.enq-msg{margin:0;color:var(--ink-soft);white-space:pre-wrap}
@media (max-width:620px){
  .admin table,.admin thead,.admin tbody,.admin tr,.admin th,.admin td{display:block;width:auto}
  .admin thead{display:none}
  .admin tr{border-bottom:1px solid var(--line);padding:14px}
  .admin tbody th{width:auto;padding:0 0 8px}
  .admin td{border:0;padding:0 0 10px}
}

/* ===========================================================================
   OUR BUSINESS — the journey
   A snake of five stages. The copper line is drawn by script.js from wherever
   the numbered circles land, so it stays joined up at any width.
   =========================================================================== */
.journey{position:relative;list-style:none;margin:clamp(44px,6vw,72px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,56px);row-gap:clamp(40px,5vw,64px)}
.j-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.j-line .track{fill:none;stroke:var(--sand-deep);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 10}
.j-line .drawn{fill:none;stroke:var(--copper);stroke-width:2;stroke-linecap:round}

.j-stop{position:relative;z-index:1;padding-top:46px;display:grid;
  grid-template-columns:clamp(150px,17vw,204px) 1fr;column-gap:clamp(16px,2vw,26px);align-items:start}
.j-stop:nth-of-type(1){grid-area:1/1}
.j-stop:nth-of-type(2){grid-area:1/2}
.j-stop:nth-of-type(3){grid-area:2/2}
.j-stop:nth-of-type(4){grid-area:2/1}
.j-stop:nth-of-type(5){grid-area:3/1}
.j-stop.j-end{grid-area:3/2;align-items:center}

.j-node{position:absolute;top:0;left:calc(clamp(150px,17vw,204px) / 2);
  transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:var(--cream);border:1px solid var(--copper);display:grid;place-items:center;
  font-family:var(--serif);font-size:1.18rem;color:var(--copper);line-height:1;
  box-shadow:0 0 0 9px var(--sand)}
.j-end .j-node{background:var(--copper);border-color:var(--copper)}
.j-end .j-node svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.j-art{margin:0;aspect-ratio:4/3;background:var(--cream);border:1px solid var(--line);overflow:hidden}
.j-art svg{width:100%;height:100%}
.j-say h3{font-size:clamp(1.22rem,1.8vw,1.5rem);margin:0 0 .4rem}
.j-say p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}

.j-plate{grid-column:1 / -1;background:var(--brown);color:#F8EFE6;padding:clamp(22px,3vw,30px) clamp(24px,3vw,34px)}
.j-plate h3{color:#fff;font-size:clamp(1.3rem,2.1vw,1.7rem);margin:0 0 .35rem}
.j-plate p{margin:0;color:rgba(248,239,230,.82);font-size:.95rem;line-height:1.6}

.j-stop{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.j-stop.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.j-stop{opacity:1;transform:none;transition:none}}

/* the journey's sand-coloured ring sits on the cream block */
#business .j-node{box-shadow:0 0 0 9px var(--cream)}

/* ===========================================================================
   THE LEAF — the five grades as cards
   =========================================================================== */
.leafhead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.leafhead > div:first-child{max-width:40rem}
.leafarrows{display:flex;gap:12px;flex:none}
.leafarr{width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);background:var(--cream);
  cursor:pointer;display:grid;place-items:center;color:var(--ink);
  transition:background .15s,transform .15s,opacity .15s,border-color .15s,color .15s}
.leafarr svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leafarr:hover{background:var(--copper);border-color:var(--copper);color:#fff}
.leafarr:active{transform:translateY(1px)}
.leafarr[disabled]{opacity:.3;cursor:default}
.leafarr[disabled]:hover{background:var(--cream);border-color:var(--ink);color:var(--ink)}

.leafrail{display:flex;gap:26px;margin-top:clamp(32px,4vw,48px);padding:14px 14px 22px 0;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.leafrail::-webkit-scrollbar{display:none}

.leafcard{position:relative;flex:0 0 clamp(248px,25vw,310px);scroll-snap-align:start}
.leafcard::before{content:"";position:absolute;inset:0;border-radius:22px;background:var(--tint);
  transform:translate(11px,11px);transition:transform .18s ease}
.leafcard-in{position:relative;background:var(--cream);border:2px solid var(--ink);border-radius:22px;
  padding:13px 13px 22px;height:100%;display:flex;flex-direction:column;transition:transform .18s ease}
.leafcard:hover::before{transform:translate(15px,15px)}
.leafcard:hover .leafcard-in{transform:translate(-2px,-2px)}

.leafcard-pic{margin:0 0 18px;border-radius:14px;overflow:hidden;aspect-ratio:1/1;background:var(--shade)}
.leafcard-pic svg,.leafcard-pic img{width:100%;height:100%}
.leafcard-pic img{object-fit:cover}

.leafcard-tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-dark);
  font-weight:600;margin:0 0 .45rem;padding-inline:4px}
.leafcard h3{font-family:var(--serif);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:1.45rem;line-height:1.1;margin:0 0 .6rem;padding-inline:4px;color:var(--ink)}
.leafcard-say{margin:0 0 1.3rem;color:var(--ink-soft);font-size:.92rem;line-height:1.55;padding-inline:4px;flex:1}
.leafcard a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--copper-dark);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding-inline:4px}
.leafcard a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.leafcard a:hover svg{transform:translateX(4px)}

.back-wrap{padding-block:clamp(32px,5vw,56px);margin:0}

/* ---------- phones and small tablets ---------- */
@media (max-width:880px){
  .journey{grid-template-columns:1fr;row-gap:30px}
  .j-stop,.j-stop.j-end{grid-area:auto !important}
  .j-stop{padding:0 0 0 64px;grid-template-columns:1fr;row-gap:14px}
  .j-node{left:0;top:4px;transform:none;width:46px;height:46px;font-size:1rem;box-shadow:0 0 0 7px var(--sand)}
  #business .j-node{box-shadow:0 0 0 7px var(--cream)}
  .j-art{max-width:260px}
  .j-say{margin-top:14px}
  .j-plate{grid-column:auto}
}
@media (max-width:760px){
  .leafhead{align-items:flex-start}
  .leafarrows{display:none}          /* a thumb swipes on a phone */
  .leafrail{gap:18px;scroll-snap-type:x proximity}
  .leafcard{flex:0 0 78vw}
}

/* ---------- hero headline typed out ---------- */
.hero h1 .caret{display:inline-block;width:3px;height:.92em;background:currentColor;
  margin-left:.08em;vertical-align:-.1em;animation:caret-blink 1s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}
.hero .wait-in{opacity:0;transform:translateY(10px)}
.hero .wait-in.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){
  .hero h1 .caret{display:none}
  .hero .wait-in{opacity:1;transform:none}
}

/* Stages 2 and 4: the words sit on an Aerospace orange block that fills in
   as the journey line reaches that stage. */
.j-stop.j-fill .j-say{padding:16px 20px 18px;margin:-16px -20px -18px;background:transparent;
  transition:background .5s ease}   /* negative margin keeps the words lined up with the other stages */
.j-stop.j-fill .j-say h3,.j-stop.j-fill .j-say p{transition:color .5s ease}
.j-stop.j-fill.lit .j-say{background:var(--title)}
.j-stop.j-fill.lit .j-say h3{color:#fff}
.j-stop.j-fill.lit .j-say p{color:rgba(255,255,255,.94)}
@media (prefers-reduced-motion:reduce){
  .j-stop.j-fill .j-say,.j-stop.j-fill .j-say h3,.j-stop.j-fill .j-say p{transition:none}
}
@media (max-width:880px){
  .j-stop.j-fill .j-say{padding:14px 16px 16px;margin:-14px -16px -16px}
}

/* The finish — tick and dark plate — holds back until the line actually
   arrives at it. The space stays reserved, so nothing jumps. */
.j-stop.j-end,.j-stop.j-end.in{opacity:0;transform:translateY(18px)}
.j-stop.j-end.lit{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .j-stop.j-end,.j-stop.j-end.in{opacity:1;transform:none}
}