/* ==========================================================================
   ALIGNER LOUNGE — Components & Sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  background:transparent;
  isolation:isolate;
  transition:background-color var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out),
             border-color var(--dur-med) var(--ease-out);
  border-bottom:1px solid transparent;
}
.site-header__inner{
  /* Three tracks — brand, centred menu, actions — instead of a flex row that
     bunches everything toward the middle and leaves one side empty. */
  display:grid;
  /* Logo and actions size to their content; the menu centres inside whatever
     is left. Forcing equal outer tracks instead centres the menu on the page
     axis, but then the two gaps around it differ — badly so in Arabic, where
     the labels are much shorter and the menu shrinks. Even gaps read better
     than a mathematically centred menu. */
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,3vw,3rem);
  min-height:var(--header-h,118px);
  transition:min-height var(--dur-med) var(--ease-out);
}
/* Over a photographic hero the nav is light text on an unpredictable image.
   A short scrim guarantees it stays readable whatever the photo does, and
   fades out once the solid header takes over. */
body.hero-dark .site-header::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:220%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgb(10 10 12 / .72),rgb(10 10 12 / .32) 55%,transparent);
  transition:opacity var(--dur-med) var(--ease-out);
}
body.scrolled .site-header::before{opacity:0}

body.scrolled .site-header{
  background:rgb(250 247 241 / .88);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--hair);
  box-shadow:0 6px 30px -18px rgb(13 13 15 / .35);
}
body.scrolled .site-header__inner{min-height:86px}
/* Header over a dark hero */
body.hero-dark:not(.scrolled) .site-header{--nav-fg:var(--cream)}
.site-header{--nav-fg:var(--ink)}

.brand{display:inline-flex;align-items:center;gap:.75rem;flex:none;justify-self:start}
/* The lock-up is stacked (teeth over wordmark over arc), so it needs real
   height to stay legible — the header is sized around it, not the reverse. */
/* Sized up ~12% from the first pass: at the old size the "CLEAR & SHINE"
   line under the wordmark was unreadable on a phone. */
.brand__logo{height:clamp(58px,6.7vw,87px);width:auto;transition:height var(--dur-med) var(--ease-out)}
body.scrolled .brand__logo{height:clamp(49px,5.1vw,65px)}
.brand__wordmark{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--f-display);font-size:1.1875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.brand__tag{
  font-size:.5625rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--nav-fg);opacity:.62;margin-top:.3rem;
}
html[lang^="ar"] .brand__name{letter-spacing:.02em}
html[lang^="ar"] .brand__tag{letter-spacing:.12em}

.nav{display:contents}
.nav__list{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1.15rem,2.2vw,2.5rem);
}
.nav-backdrop{display:none}
.nav__link{
  position:relative;
  font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--nav-fg);white-space:nowrap;
  padding-block:.5rem;transition:color var(--dur-fast) var(--ease-out);
}
html[lang^="ar"] .nav__link{
  font-size:.9375rem;font-weight:500;letter-spacing:0;text-transform:none;
}
.nav__link::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:100%;height:1px;background:var(--gold);
  scale:0 1;transform-origin:inline-start;
  transition:scale var(--dur-fast) var(--ease-out);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--gold-deep)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{scale:1 1}
body.hero-dark:not(.scrolled) .nav__link:hover{color:var(--gold-pale)}

/* The gap here has to match the logo→menu and menu→switch rhythm (~44px at
   1440), otherwise the language switch reads as part of the button. */
.nav__actions{display:flex;align-items:center;gap:clamp(1.5rem,2.9vw,2.75rem);justify-self:end}
.nav__actions .btn{padding:.85rem 1.6rem;font-size:.6875rem;letter-spacing:.14em}
html[lang^="ar"] .nav__actions .btn{font-size:.875rem;letter-spacing:0}

/* Language switch */
.lang-switch{display:inline-flex;align-items:center;gap:.5rem}
.lang-switch::before{
  content:"";width:1px;height:14px;background:currentColor;opacity:.22;
  order:2;color:var(--nav-fg);
}
.lang-switch__btn:first-of-type{order:1}
.lang-switch__btn:last-of-type{order:3}
.lang-switch__btn{
  padding:.3rem 0;font-size:.6875rem;font-weight:500;letter-spacing:.14em;
  color:var(--nav-fg);opacity:.45;
  transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  /* The Arabic "ع" sits on every English page. Left in the theme stack it
     pulls down ~260KB of Arabic webfonts for a single glyph, so this one
     control is drawn with the system UI font instead. */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Noto Sans Arabic",sans-serif;
}
.lang-switch__btn[lang="ar"]{font-size:.8125rem;letter-spacing:0}
.lang-switch__btn[aria-current="true"]{color:var(--gold-soft);opacity:1}
body.scrolled .lang-switch__btn[aria-current="true"]{color:var(--gold-deep)}
.lang-switch__btn:hover{opacity:1}

/* Mobile toggle */
/* Bars are absolutely positioned against the button's centre so the open
   state can collapse all three onto the exact same point — offsetting them
   inside a flow layout leaves the X visibly mis-registered. */
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--radius);flex:none;position:relative;z-index:102}
.nav-toggle__bar{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  width:22px;height:1.5px;background:var(--nav-fg);border-radius:2px;
  transition:translate var(--dur-fast) var(--ease-out),
             rotate var(--dur-fast) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out),
             scale var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.nav-toggle__bar:nth-child(1){translate:-50% calc(-50% - 6.5px)}
.nav-toggle__bar:nth-child(2){translate:-50% -50%}
.nav-toggle__bar:nth-child(3){translate:-50% calc(-50% + 6.5px)}

/* The close affordance has to clear the drawer it closes. */
body.nav-open .nav-toggle__bar{background:var(--cream)}
body.nav-open .nav-toggle__bar:nth-child(1){translate:-50% -50%;rotate:45deg}
body.nav-open .nav-toggle__bar:nth-child(2){opacity:0;scale:0 1}
body.nav-open .nav-toggle__bar:nth-child(3){translate:-50% -50%;rotate:-45deg}

/* Narrow desktops: keep all three tracks, just tighter. */
@media (min-width:1025px) and (max-width:1300px){
  .nav__list{gap:1.05rem}
  .nav__link{font-size:.6875rem;letter-spacing:.1em}
  .nav__actions .btn{padding:.8rem 1.15rem;font-size:.625rem;letter-spacing:.1em}
  .site-header__inner{gap:1.25rem}
}

@media (max-width:1024px){
  .site-header__inner{grid-template-columns:auto 1fr}
  /* The mobile header has no menu competing for width — spend it on the mark. */
  .brand__logo{height:clamp(62px,15vw,82px)}
  body.scrolled .brand__logo{height:clamp(52px,12vw,66px)}
  .nav-toggle{display:grid;justify-self:end}
  .nav-backdrop{display:block}
  .nav{
    display:flex;
    position:fixed;z-index:101;inset-block-start:0;inset-inline-end:0;
    width:min(88vw,380px);height:100dvh;
    background:var(--ink);color:var(--cream);
    flex-direction:column;align-items:stretch;justify-content:center;
    gap:2rem;padding:5rem var(--gutter) 2rem;
    translate:100% 0;visibility:hidden;
    transition:translate var(--dur-med) var(--ease-out),visibility var(--dur-med);
    overflow-y:auto;
  }
  html[dir="rtl"] .nav{translate:-100% 0}
  body.nav-open .nav{translate:0 0;visibility:visible}
  /* visibility:hidden already removes the closed drawer from the tab order. */
  body.nav-open{overflow:hidden}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{--nav-fg:var(--cream);font-size:1.25rem;font-family:var(--f-display);padding-block:1rem;border-bottom:1px solid var(--hair-ink)}
  .nav__link::after{display:none}
  .nav__actions{flex-direction:column;align-items:stretch}
  .nav__actions .btn{width:100%;padding:.95rem 1.5rem;font-size:.9375rem}
  .lang-switch{align-self:center;gap:1rem}
  .lang-switch__btn{color:var(--cream);font-size:.8125rem}
  .nav__actions{justify-self:stretch}
  .nav-backdrop{
    position:fixed;inset:0;z-index:99;background:rgb(13 13 15 / .5);
    backdrop-filter:blur(3px);opacity:0;visibility:hidden;
    transition:opacity var(--dur-med),visibility var(--dur-med);
  }
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(100dvh,900px);
  /* Two rows: the copy takes the space and centres in it, the scroll cue sits
     underneath it. Absolutely positioning the cue let it land on top of the
     buttons at some viewport heights. */
  display:grid;
  grid-template-rows:1fr auto;
  background:var(--ink);color:var(--text-on-ink);
  padding-block:calc(var(--header-h,118px) + 3rem) 2.5rem;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42;animation:kenburns 22s ease-in-out infinite alternate}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 78% 30%, rgb(201 162 39 / .16), transparent 70%),
    linear-gradient(to bottom, rgb(13 13 15 / .55) 0%, rgb(13 13 15 / .72) 55%, var(--ink) 100%);
}
html[dir="rtl"] .hero__bg::after{background:
    radial-gradient(60% 70% at 22% 30%, rgb(201 162 39 / .16), transparent 70%),
    linear-gradient(to bottom, rgb(13 13 15 / .55) 0%, rgb(13 13 15 / .72) 55%, var(--ink) 100%);}
@keyframes kenburns{from{scale:1}to{scale:1.09}}
@media (prefers-reduced-motion:reduce){.hero__bg img{animation:none}}

.hero__inner{position:relative;z-index:1;max-width:58rem;grid-row:1;align-self:center}
.hero h1{color:var(--cream);margin-bottom:1.5rem}
.hero__tagline{
  font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  margin-bottom:.5rem;
}
html[lang^="ar"] .hero__tagline{font-style:normal}
.hero__lead{
  font-size:clamp(1.0625rem,1.6vw,1.3125rem);
  color:var(--text-on-ink-muted);max-width:52ch;margin-bottom:2.5rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem}
.hero__scroll{
  grid-row:2;justify-self:center;z-index:1;
  display:grid;place-items:center;gap:.7rem;
  margin-top:clamp(2rem,4vh,3.5rem);
  font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-on-ink-muted);
  transition:color var(--dur-fast) var(--ease-out);
}
.hero__scroll:hover{color:var(--gold-soft)}
html[lang^="ar"] .hero__scroll{letter-spacing:0;text-transform:none;font-size:.8125rem}
.hero__scroll span{display:block;width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:scrollHint 2.2s var(--ease-out) infinite}
@keyframes scrollHint{0%{opacity:0;scale:1 .3;transform-origin:top}50%{opacity:1;scale:1 1}100%{opacity:0;scale:1 1;transform-origin:bottom}}
@media (max-width:720px){.hero__scroll{display:none}}

/* --------------------------------------------------------------------------
   PILL LIST  (nearly invisible / removable / customized …)
   -------------------------------------------------------------------------- */
.pill-row{display:flex;flex-wrap:wrap;gap:.65rem}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1.05rem;border:1px solid var(--hair);border-radius:var(--radius-pill);
  font-size:.8125rem;letter-spacing:.04em;color:var(--text-muted);background:var(--white);
}
.section--ink .pill{border-color:var(--hair-ink);background:rgb(255 255 255 / .04);color:var(--text-on-ink-muted)}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

/* --------------------------------------------------------------------------
   CARDS
   Not boxes. A filled, rounded, shadowed card is the single most templated
   shape on the web; these are columns separated by a gold hairline that
   extends on hover, which reads as editorial rather than as a widget.
   -------------------------------------------------------------------------- */
.card{
  position:relative;
  background:none;
  border:0;
  border-radius:0;
  padding:2.25rem 0 0;
  display:flex;flex-direction:column;gap:.9rem;
}
.card::before{
  content:"";
  position:absolute;inset-block-start:0;inset-inline-start:0;
  width:2.25rem;height:1px;
  background:var(--gold);
  transition:width var(--dur-med) var(--ease-out),opacity var(--dur-med) var(--ease-out);
}
.card::after{
  content:"";
  position:absolute;inset-block-start:0;inset-inline:0;
  height:1px;background:var(--hair);z-index:-1;
}
.card:hover::before{width:100%}
.card:hover{transform:none;box-shadow:none}

.card__icon{
  width:auto;height:auto;flex:none;display:block;
  border:0;background:none;border-radius:0;
  color:var(--gold-deep);margin-bottom:.35rem;
}
.card__icon svg{width:26px;height:26px;stroke-width:1.1}

.card h3,.card h4{margin-bottom:.1rem;letter-spacing:-.01em}
.card h4{font-family:var(--f-display);font-weight:500;font-size:clamp(1.1875rem,1.7vw,1.4375rem);line-height:1.2}
html[lang^="ar"] .card h4{font-family:var(--f-body);font-weight:700;line-height:1.45}
.card p{color:var(--text-muted);font-size:1rem;line-height:1.75;font-weight:300}

.card--ink,.section--ink .card{background:none}
.section--ink .card::after{background:var(--hair-ink)}
.section--ink .card h3,.section--ink .card h4{color:var(--cream)}
.section--ink .card p{color:var(--text-on-ink-muted)}
.section--ink .card__icon{color:var(--gold-soft);border:0;background:none}

/* Technology split cards (DPA vs Thermoformed) */
.tech-card{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--hair);
  background:var(--white);
  display:flex;flex-direction:column;
  min-height:26rem;
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out);
}
.tech-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.tech-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--cream-2)}
.tech-card__media img{width:100%;height:100%;object-fit:cover;transition:scale var(--dur-slow) var(--ease-out)}
.tech-card:hover .tech-card__media img{scale:1.07}
.tech-card__body{padding:clamp(1.6rem,2.6vw,2.5rem);display:flex;flex-direction:column;gap:1rem;flex:1}
.tech-card__badge{
  position:absolute;inset-block-start:1rem;inset-inline-start:1rem;z-index:2;
  padding:.4rem .9rem;border-radius:var(--radius-pill);
  background:var(--gold-grad);color:#2A2105;
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
html[lang^="ar"] .tech-card__badge{letter-spacing:.02em}
.tech-card__meta{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
  font-size:.8125rem;color:var(--gold-deep);letter-spacing:.04em;
  padding-block:.85rem;border-block:1px solid var(--hair);
}
.tech-card__meta span{display:inline-flex;align-items:center;gap:.45rem}
.tech-card__meta span + span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--gold);margin-inline-end:.45rem}
.tech-card__body > .btn{margin-top:auto;align-self:flex-start}

/* --------------------------------------------------------------------------
   WORKFLOW / NUMBERED STEPS
   -------------------------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  display:grid;
  grid-template-columns:minmax(5.5rem,7rem) 1fr;
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--hair);
  align-items:start;
}
.section--ink .step{border-top-color:var(--hair-ink)}
.step:last-child{border-bottom:1px solid var(--hair)}
.section--ink .step:last-child{border-bottom-color:var(--hair-ink)}
.step__num{
  font-family:var(--f-display);
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1;font-weight:600;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.step__title{margin-bottom:.45rem}
.step__body{color:var(--text-muted);max-width:56ch}
.section--ink .step__body{color:var(--text-on-ink-muted)}
@media (max-width:620px){
  .step{grid-template-columns:1fr;gap:.5rem}
  .step__num{font-size:2rem}
}

/* --------------------------------------------------------------------------
   STATS BAND
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.stat{text-align:center;padding-inline:1rem;position:relative}
.stat + .stat::before{
  content:"";position:absolute;inset-block:.5rem;inset-inline-start:0;
  width:1px;background:var(--hair-ink);
}
@media (max-width:760px){.stat + .stat::before{display:none}}
.stat__num{
  font-family:var(--f-display);font-size:clamp(2.5rem,5vw,3.75rem);line-height:1;font-weight:600;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.stat__label{margin-top:.75rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-ink-muted)}
html[lang^="ar"] .stat__label{letter-spacing:.02em;text-transform:none;font-size:.9375rem}

/* --------------------------------------------------------------------------
   SPLIT / MEDIA+TEXT
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--cream-2)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media--wide{aspect-ratio:4/3}
.split--reverse .split__media{order:2}
@media (max-width:840px){.split--reverse .split__media{order:0}}
.split__frame::after{
  content:"";position:absolute;inset:.75rem;border:1px solid rgb(240 223 168 / .5);border-radius:calc(var(--radius-lg) - .35rem);pointer-events:none;
}

/* --------------------------------------------------------------------------
   FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq{max-width:var(--maxw-narrow);margin-inline:auto}
.faq__item{border-bottom:1px solid var(--hair)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.4rem;text-align:start;
  font-family:var(--f-display);font-size:clamp(1.0625rem,1.7vw,1.3125rem);font-weight:600;color:var(--ink);
  transition:color var(--dur-fast) var(--ease-out);
}
html[lang^="ar"] .faq__q{font-family:var(--f-body);font-weight:700}
.faq__q:hover{color:var(--gold-deep)}
.faq__icon{flex:none;width:26px;height:26px;position:relative}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;
  width:13px;height:1.5px;background:var(--gold-deep);
  translate:-50% -50%;transition:rotate var(--dur-med) var(--ease-out),opacity var(--dur-med) var(--ease-out);
}
.faq__icon::after{rotate:90deg}
.faq__q[aria-expanded="true"] .faq__icon::after{rotate:0deg;opacity:0}
.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-med) var(--ease-out);
}
.faq__q[aria-expanded="true"] + .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding-block:0 1.5rem;color:var(--text-muted);max-width:68ch}

/* --------------------------------------------------------------------------
   DUAL CTA (patients / professionals)
   -------------------------------------------------------------------------- */
.cta-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1px;background:var(--hair-ink);border-radius:var(--radius-lg);overflow:hidden}
.cta-split__pane{
  background:var(--ink-2);padding:clamp(2rem,4vw,3.5rem);
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
  transition:background-color var(--dur-med) var(--ease-out);
}
.cta-split__pane:hover{background:var(--ink-3)}
.cta-split__pane h3{color:var(--cream)}
.cta-split__pane p{color:var(--text-on-ink-muted);flex:1}
.cta-split__pane .btn{margin-top:.75rem}

/* Big closing CTA */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--cream);
  text-align:center;
  padding-block:clamp(4rem,8vw,7rem);
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(50% 70% at 50% 100%, rgb(201 162 39 / .2), transparent 70%);
}
.cta-band > *{position:relative}
.cta-band h2{color:var(--cream);margin-bottom:1rem}
.cta-band .lead{color:var(--text-on-ink-muted);margin-inline:auto;margin-bottom:2.25rem}
.cta-band .cluster{justify-content:center}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.form{display:grid;gap:1.1rem}
.form--2col{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
html[lang^="ar"] .field label{letter-spacing:0;text-transform:none;font-size:.9375rem}
.field label .req{color:var(--gold-deep)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1.05rem;
  background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);
  font-size:1rem;color:var(--text);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgb(201 162 39 / .14);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted);opacity:.6}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B6B78' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-inline-end:2.5rem}
html[dir="rtl"] .field select{background-position:left 1rem center;padding-inline-end:1.05rem;padding-inline-start:2.5rem}
.field input[type="tel"]{direction:ltr;text-align:start}
html[dir="rtl"] .field input[type="tel"]{text-align:right}

/* Honeypot + time trap — never visible */
.field--trap{position:absolute!important;left:-9999px;opacity:0;pointer-events:none;height:0;overflow:hidden}

.form__consent{display:flex;align-items:flex-start;gap:.65rem;font-size:.875rem;color:var(--text-muted);grid-column:1/-1}
.form__consent input{width:auto;flex:none;margin-top:.3rem;accent-color:var(--gold-deep)}
.form__msg{grid-column:1/-1;padding:.9rem 1.15rem;border-radius:var(--radius);font-size:.9375rem;display:none}
.form__msg.is-ok{display:block;background:rgb(201 162 39 / .12);border:1px solid var(--gold-pale);color:var(--gold-deep)}
.form__msg.is-err{display:block;background:#FDECEC;border:1px solid #F3C2C2;color:#A32020}
.form button[type="submit"]{grid-column:1/-1;justify-self:start}
.form.is-busy{opacity:.6;pointer-events:none}

.form-panel{
  background:var(--white);border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3.5vw,3rem);box-shadow:var(--shadow-soft);
}

/* --------------------------------------------------------------------------
   FLOATING CONTACT BAR
   -------------------------------------------------------------------------- */
.float-bar{
  position:fixed;z-index:90;
  inset-block-end:1.25rem;inset-inline-end:1.25rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.float-bar__btn{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:var(--cream);
  box-shadow:var(--shadow-lift);
  transition:transform var(--dur-fast) var(--ease-spring),background-color var(--dur-fast) var(--ease-out);
}
.float-bar__btn:hover{transform:scale(1.08)}
.float-bar__btn svg{width:23px;height:23px}
.float-bar__btn--wa{background:#25D366;color:#fff}
.float-bar__btn--call{background:var(--gold-grad);color:#2A2105}
@media (max-width:640px){
  .float-bar{
    inset-inline:0;inset-block-end:0;
    flex-direction:row;gap:0;
    background:var(--ink);border-top:1px solid var(--hair-ink);
    padding:.5rem;
  }
  .float-bar__btn{flex:1;width:auto;height:48px;border-radius:var(--radius);box-shadow:none;gap:.5rem;font-size:.875rem}
  .float-bar__btn span{display:inline}
  body{padding-bottom:64px}
}
.float-bar__btn span{display:none}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--text-on-ink-muted);padding-block:clamp(3.5rem,6vw,5rem) 0}
/* One column on phones, four from tablet up. An auto-fit track mixed with a
   fixed first column cannot collapse below its own minimum, which is what
   pushed the footer past the viewport. */
.site-footer__grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
@media (min-width:640px){
  .site-footer__grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__brand{grid-column:1/-1}
}
@media (min-width:960px){
  .site-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .site-footer__brand{grid-column:auto}
}
.site-footer__brand .brand__tag{color:var(--text-on-ink-muted)}
.site-footer__about{margin-top:1.1rem;max-width:34ch;font-size:.9375rem}
.site-footer h4{
  color:var(--cream);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:1.15rem;font-family:var(--f-body);font-weight:600;
}
html[lang^="ar"] .site-footer h4{letter-spacing:0;text-transform:none;font-size:1rem}
.site-footer li + li{margin-top:.7rem}
.site-footer a{font-size:.9375rem;transition:color var(--dur-fast) var(--ease-out)}
.site-footer a:hover{color:var(--gold-pale)}
.site-footer__keywords{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;
  padding-block:1.75rem;border-top:1px solid var(--hair-ink);
  font-size:.8125rem;letter-spacing:.08em;color:var(--text-on-ink-muted);
}
.site-footer__keywords span{display:inline-flex;align-items:center;gap:1.25rem}
.site-footer__keywords span::after{content:"•";color:var(--gold);opacity:.6}
.site-footer__keywords span:last-child::after{display:none}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding-block:1.5rem;border-top:1px solid var(--hair-ink);font-size:.8125rem;
}
.site-footer__disclaimer{
  padding-block:1.25rem 2rem;font-size:.78125rem;line-height:1.7;
  color:rgb(156 154 147 / .75);max-width:70ch;
}

/* --------------------------------------------------------------------------
   PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */
.page-hero{
  background:var(--ink);color:var(--cream);
  padding-block:calc(var(--header-h,118px) + clamp(3.5rem,7vw,6rem)) clamp(3.5rem,7vw,6rem);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(55% 80% at 80% 10%, rgb(201 162 39 / .14), transparent 68%);
}
html[dir="rtl"] .page-hero::before{background:radial-gradient(55% 80% at 20% 10%, rgb(201 162 39 / .14), transparent 68%)}
.page-hero > *{position:relative}
.page-hero h1{color:var(--cream)}
.page-hero .lead{color:var(--text-on-ink-muted);margin-top:1.15rem}
.breadcrumbs{font-size:.8125rem;color:var(--text-on-ink-muted);margin-bottom:1.25rem}
.breadcrumbs a:hover{color:var(--gold-pale)}
.breadcrumbs .sep{margin-inline:.55rem;opacity:.5}

/* --------------------------------------------------------------------------
   ENTRY CONTENT (blog / pages)
   -------------------------------------------------------------------------- */
.entry-content{max-width:var(--maxw-narrow);margin-inline:auto}
.entry-content > * + *{margin-top:1.4rem}
.entry-content h2{margin-top:2.75rem}
.entry-content h3{margin-top:2rem}
.entry-content a:not(.btn){color:var(--gold-deep);border-bottom:1px solid var(--gold-pale)}
.entry-content a:not(.btn):hover{border-color:var(--gold)}
.entry-content ul:not(.pill-row),.entry-content ol{padding-inline-start:1.35rem}
.entry-content ul:not(.pill-row){list-style:none}
.entry-content ul:not(.pill-row) li{position:relative;padding-inline-start:1.1rem;margin-block:.55rem}
.entry-content ul:not(.pill-row) li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.7em;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.entry-content ol{list-style:decimal}
.entry-content ol li{margin-block:.55rem;padding-inline-start:.35rem}
.entry-content blockquote{
  border-inline-start:2px solid var(--gold);padding-inline-start:1.5rem;
  font-family:var(--f-display);font-size:1.25rem;font-style:italic;color:var(--ink);
}
html[lang^="ar"] .entry-content blockquote{font-style:normal}
.entry-content img{border-radius:var(--radius-lg)}

/* Post cards */
.post-card{display:flex;flex-direction:column;gap:1rem;background:var(--white);border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out)}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.post-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:scale var(--dur-slow) var(--ease-out)}
.post-card:hover .post-card__media img{scale:1.06}
.post-card__body{padding:1.5rem 1.6rem 1.9rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.post-card__date{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
html[lang^="ar"] .post-card__date{letter-spacing:0;text-transform:none;font-size:.875rem}
.post-card__body p{color:var(--text-muted);font-size:.9375rem;flex:1}

.pagination{display:flex;gap:.5rem;justify-content:center;margin-top:3rem;flex-wrap:wrap}
.pagination .page-numbers{
  min-width:42px;height:42px;display:grid;place-items:center;padding-inline:.75rem;
  border:1px solid var(--hair);border-radius:var(--radius);font-size:.9375rem;
  transition:all var(--dur-fast) var(--ease-out);
}
.pagination .page-numbers:hover{border-color:var(--gold);color:var(--gold-deep)}
.pagination .page-numbers.current{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* --------------------------------------------------------------------------
   AUDIENCE SWITCH  (patient / dental professional)
   -------------------------------------------------------------------------- */
.audience-switch{
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
  padding:.4rem;background:var(--cream-2);border:1px solid var(--hair);
  border-radius:var(--radius-pill);
}
.audience-switch__btn{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.8rem 1rem;border-radius:var(--radius-pill);
  font-size:.9375rem;font-weight:500;color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.audience-switch__btn svg{width:19px;height:19px;flex:none}
.audience-switch__btn:hover{color:var(--gold-deep)}
.audience-switch__btn.is-active{
  background:var(--ink);color:var(--cream);box-shadow:var(--shadow-soft);
}
.audience-switch__btn.is-active svg{color:var(--gold-soft)}
@media (max-width:520px){
  .audience-switch{grid-template-columns:1fr}
  .audience-switch__btn{justify-content:flex-start}
}

.form-panel__alt{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--hair);
  font-size:.9375rem;color:var(--text-muted);
}

.map-embed{
  margin-top:clamp(2rem,4vw,3rem);
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hair);
  line-height:0;
}

/* --------------------------------------------------------------------------
   SUBMENU
   One level only. Technologies has two product pages under it; putting them
   in the top row made the menu a product list rather than a site structure.
   -------------------------------------------------------------------------- */
.nav__list li{position:relative}

.nav__list .menu-item-has-children > .nav__link::before{
  content:"";
  position:absolute;inset-block-end:-2px;inset-inline-end:-.85rem;
  width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.4;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.nav__list .menu-item-has-children:hover > .nav__link::before{opacity:1}

.nav__list .sub-menu{
  position:absolute;z-index:10;
  inset-block-start:calc(100% + .9rem);
  inset-inline-start:50%;
  min-width:17rem;
  padding:.6rem 0;
  margin:0;list-style:none;
  background:var(--ink);
  border:1px solid var(--hair-ink);
  border-radius:var(--radius);
  box-shadow:0 30px 70px -30px rgb(0 0 0 / .75);
  opacity:0;visibility:hidden;
  translate:-50% .6rem;
  transition:opacity var(--dur-fast) var(--ease-out),
             translate var(--dur-fast) var(--ease-out),
             visibility var(--dur-fast);
}
/* A hover bridge, so the pointer can cross the gap without the panel closing. */
.nav__list .menu-item-has-children::after{
  content:"";position:absolute;inset-inline:0;
  inset-block-start:100%;height:1.2rem;
}
.nav__list .menu-item-has-children:hover > .sub-menu,
.nav__list .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;translate:-50% 0;
}

.nav__list .sub-menu .nav__link{
  display:block;
  padding:.7rem 1.35rem;
  font-size:.8125rem;letter-spacing:.04em;text-transform:none;
  font-weight:400;color:var(--text-on-ink);
  white-space:nowrap;
}
html[lang^="ar"] .nav__list .sub-menu .nav__link{font-size:.9375rem;letter-spacing:0}
.nav__list .sub-menu .nav__link::after{display:none}
.nav__list .sub-menu .nav__link:hover{color:var(--gold-pale);background:rgb(240 223 168 / .06)}

/* Mobile: the drawer shows sub-items inline, indented under their parent. */
@media (max-width:1024px){
  .nav__list .sub-menu{
    position:static;opacity:1;visibility:visible;translate:none;
    min-width:0;padding:0 0 .5rem;margin:0;
    background:none;border:0;box-shadow:none;
  }
  .nav__list .menu-item-has-children::after{display:none}
  .nav__list .menu-item-has-children > .nav__link::before{display:none}
  .nav__list .sub-menu li{border:0}
  .nav__list .sub-menu .nav__link{
    font-family:var(--f-body);font-size:.9375rem;
    padding:.6rem 0 .6rem 1.25rem;
    border:0;opacity:.72;
  }
  html[dir="rtl"] .nav__list .sub-menu .nav__link{padding:.6rem 1.25rem .6rem 0}
  .nav__list .sub-menu .nav__link::before{
    content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;
    width:.65rem;height:1px;background:var(--gold);opacity:.5;
  }
}