/* Smile Journeys — Orient Dental Clinic UK
   Warm-stone premium. Palette lives in :root — flip the whole site by editing these. */
:root{
  --stone:#F3EEE4;        /* page background */
  --stone-deep:#EBE3D5;   /* alt band */
  --panel:#FCFAF4;        /* cards */
  --ink:#262A20;          /* headings — deep warm charcoal */
  --body:#494E43;         /* body copy */
  --muted:#7A7E71;        /* secondary */
  --line:rgba(58,66,50,0.14);
  --sage:#4C7A62;         /* primary accent */
  --sage-deep:#3B6450;    /* buttons */
  --sage-soft:#E7EEE6;    /* soft fills */
  --brass:#A98A4E;        /* restrained metallic accent — premium touch */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  --maxw:1100px;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--stone);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.15;letter-spacing:.005em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);display:inline-block;}
.eyebrow::after{content:"";display:block;width:34px;height:2px;background:var(--brass);margin-top:10px;}
.eyebrow.center{ }
.center{text-align:center;}
.center .eyebrow::after{margin-left:auto;margin-right:auto;}
.muted{color:var(--muted);}
.serif-quote{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--sage);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:600;padding:13px 24px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;}
.btn i{font-size:18px;}
.btn--wa{background:var(--sage-deep);color:#FCFAF4;}
.btn--wa:hover{background:var(--sage);transform:translateY(-2px);box-shadow:0 8px 22px rgba(59,100,80,.22);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--sage);}
.btn--ghost:hover{background:var(--sage-soft);transform:translateY(-2px);}
.btn--light{background:#FCFAF4;color:var(--sage-deep);}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.12);}

/* header */
.site{position:sticky;top:0;z-index:50;background:rgba(252,250,244,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);}
.site .wrap{display:flex;align-items:center;gap:18px;height:74px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand__mark{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--sage);display:flex;align-items:center;justify-content:center;color:var(--sage);font-size:21px;flex:none;}
.brand__name{display:block;font-size:17px;font-weight:700;letter-spacing:.16em;color:var(--ink);font-family:var(--sans);line-height:1;}
.brand__tag{display:block;font-size:9.5px;letter-spacing:.22em;color:var(--sage);text-transform:uppercase;margin-top:3px;}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:500;color:var(--body);}
.nav a:hover{color:var(--sage);}
.site .btn{padding:10px 18px;font-size:14px;}
.nav-toggle{display:none;}

/* hero */
.hero{padding:84px 0 72px;text-align:center;}
.hero h1{font-size:54px;margin:20px auto 18px;max-width:760px;}
.hero p{font-size:19px;max-width:560px;margin:0 auto 30px;color:var(--body);}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero__quote{margin-top:30px;}

/* trust strip */
.trust{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trust .grid{display:grid;grid-template-columns:repeat(4,1fr);}
.trust__item{padding:26px 22px;border-right:1px solid var(--line);}
.trust__item:last-child{border-right:none;}
.trust__item i{color:var(--sage);font-size:24px;}
.trust__item p{font-size:14px;margin-top:10px;color:var(--ink);line-height:1.45;}

/* sections */
.section{padding:84px 0;}
.section--stone{background:var(--stone-deep);}
.section--panel{background:var(--panel);}
.section__head{max-width:620px;margin:0 auto 50px;}
.section__head h2{font-size:40px;margin-top:14px;}
.section__head p{margin-top:14px;font-size:18px;}

/* journey */
.journey{max-width:760px;margin:0 auto;}
.step{display:flex;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step__num{flex:none;width:50px;height:50px;border-radius:50%;border:1px solid var(--sage);color:var(--sage);font-family:var(--serif);font-size:24px;display:flex;align-items:center;justify-content:center;}
.step__num i{font-size:22px;}
.step h3{font-size:23px;margin-bottom:6px;}
.step p{font-size:16px;}

/* treatments */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:transform .15s ease,box-shadow .2s ease;}
.tcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(38,42,32,.08);}
.tcard i{color:var(--sage);font-size:26px;}
.tcard h3{font-size:22px;margin:12px 0 4px;}
.tcard .price{color:var(--sage);font-weight:600;font-size:15px;font-family:var(--sans);}
.tcard p{font-size:15px;margin-top:8px;color:var(--muted);}

/* why */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:920px;margin:0 auto;}
.why__item{text-align:center;}
.why__item i{color:var(--sage);font-size:30px;}
.why__item h3{font-size:22px;margin:12px 0 6px;}
.why__item p{font-size:15px;color:var(--muted);}

/* meet darren teaser */
.meet{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;max-width:980px;margin:0 auto;}
.meet__photo{aspect-ratio:4/5;background:var(--sage-soft);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--sage);border:1px solid var(--line);}
.meet__photo i{font-size:64px;opacity:.5;}
.meet h2{font-size:36px;margin:14px 0 16px;}
.meet p{margin-bottom:14px;}

/* pricing table */
.ptable{max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 26px;border-bottom:1px solid var(--line);}
.prow:last-child{border-bottom:none;}
.prow .t{color:var(--ink);font-size:16px;}
.prow .t small{color:var(--muted);font-size:13px;}
.prow .p{color:var(--sage);font-weight:600;white-space:nowrap;font-size:16px;}
.pnote{max-width:760px;margin:16px auto 0;font-size:13.5px;color:var(--muted);text-align:center;}
.compare{max-width:760px;margin:26px auto 0;display:flex;align-items:center;gap:20px;background:var(--sage-soft);border-radius:var(--r);padding:22px 26px;flex-wrap:wrap;}
.compare .c{flex:1;min-width:150px;}
.compare .c .lbl{font-size:13px;color:var(--muted);}
.compare .c .v{font-family:var(--serif);font-size:26px;color:var(--sage);}
.compare .c .v.old{color:var(--muted);text-decoration:line-through;}
.compare i{color:var(--sage);font-size:24px;}

/* faq */
.faqs{max-width:760px;margin:0 auto;}
.faq{padding:22px 0;border-bottom:1px solid var(--line);}
.faq:last-child{border-bottom:none;}
.faq h3{font-size:20px;margin-bottom:6px;}
.faq p{font-size:16px;}

/* trip steps (treatment) */
.trip{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);}
.trip:last-child{border-bottom:none;}
.trip .tag{flex:none;width:88px;color:var(--sage);font-weight:600;font-size:14px;}

/* cta band */
.cta-band{background:var(--sage-deep);color:#FCFAF4;text-align:center;padding:74px 0;}
.cta-band h2{color:#FCFAF4;font-size:38px;}
.cta-band p{color:rgba(252,250,244,.82);max-width:520px;margin:12px auto 26px;}

/* breadcrumb */
.crumb{padding:22px 0 0;font-size:14px;color:var(--muted);}
.crumb a:hover{color:var(--sage);}

/* page hero (inner) */
.phero{padding:54px 0 10px;}
.phero h1{font-size:46px;margin:14px 0 16px;max-width:640px;}
.phero p{font-size:18px;max-width:600px;}

/* footer */
.foot{background:var(--ink);color:#CFD2C6;padding:54px 0 26px;}
.foot a{color:#CFD2C6;}
.foot a:hover{color:#fff;}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12);}
.foot__brand .brand__name{color:#fff;}
.foot__brand p{font-size:14px;color:#9DA294;margin-top:14px;max-width:320px;}
.foot h4{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#9DA294;margin-bottom:14px;}
.foot ul{list-style:none;font-size:15px;line-height:2;}
.foot__legal{padding-top:22px;font-size:12.5px;color:#878C7C;line-height:1.7;}

/* responsive */
@media(max-width:860px){
  .trust .grid{grid-template-columns:repeat(2,1fr);}
  .trust__item:nth-child(2){border-right:none;}
  .trust__item{border-bottom:1px solid var(--line);}
  .tgrid{grid-template-columns:repeat(2,1fr);}
  .why{grid-template-columns:1fr;gap:28px;}
  .meet{grid-template-columns:1fr;gap:26px;}
  .foot__top{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  body{font-size:16px;}
  .nav{display:none;}
  .nav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--panel);padding:18px 24px;gap:16px;border-bottom:1px solid var(--line);}
  .nav-toggle{display:inline-flex;margin-left:auto;background:none;border:none;color:var(--ink);font-size:26px;cursor:pointer;}
  .site .btn{display:none;}
  .hero{padding:54px 0 48px;}
  .hero h1{font-size:38px;}
  .hero p{font-size:17px;}
  .section{padding:58px 0;}
  .section__head h2,.phero h1{font-size:32px;}
  .tgrid{grid-template-columns:1fr;}
  .foot__top{grid-template-columns:1fr;}
  .compare{flex-direction:column;align-items:flex-start;}
}