/* ==========================================================================
   ALIGNER LOUNGE — Domain visuals, pattern, modal
   ========================================================================== */

/* --------------------------------------------------------------------------
   DENTAL ARCH PATTERN
   A watermark, not decoration: low opacity, masked so it fades rather than
   ending on a hard edge, and always behind content.
   -------------------------------------------------------------------------- */
.has-pattern{position:relative;isolation:isolate}
.has-pattern::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/pattern-arch.svg");
  background-size:180px 156px;
  color:var(--gold);
  opacity:.05;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.section--ink.has-pattern::before{opacity:.07}
/* SVG files cannot inherit currentColor through background-image, so tint the
   layer instead of the file. */
.has-pattern::before{filter:sepia(1) saturate(2.2) hue-rotate(2deg)}

/* --------------------------------------------------------------------------
   ALIGNMENT VISUAL
   -------------------------------------------------------------------------- */
.alignment__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
}
.alignment__copy h2{margin-bottom:1.15rem}
.alignment__copy .lead{margin-bottom:2rem}

.alignment__figure{
  margin:0;
  background:linear-gradient(160deg,rgb(255 255 255 / .05),rgb(240 223 168 / .04));
  border:1px solid var(--hair-ink);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.75rem);
}
.arch{width:100%;height:auto;overflow:visible}
.alignment__caption{
  margin-top:1.25rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-on-ink-muted);text-align:center;
}
html[lang^="ar"] .alignment__caption{letter-spacing:0;text-transform:none;font-size:.8125rem}

/* Each tooth starts crowded and eases to its planned position. */
.tooth{
  transform-box:fill-box;
  transform-origin:center;
  translate:var(--dx) var(--dy);
  rotate:var(--rot);
  transition:translate 1.1s var(--ease-out),rotate 1.1s var(--ease-out);
  transition-delay:calc(var(--i) * 70ms);
}
.alignment.is-aligned .tooth{translate:0 0;rotate:0deg}

.arch__tray{
  opacity:0;
  translate:0 -10px;
  transition:opacity .7s var(--ease-out),translate .7s var(--ease-out);
  transition-delay:1.15s;
}
.alignment.is-aligned .arch__tray{opacity:1;translate:0 0}

.arch__gum{
  stroke-dasharray:420;stroke-dashoffset:420;
  transition:stroke-dashoffset 1.4s var(--ease-out);
}
.alignment.is-aligned .arch__gum{stroke-dashoffset:0}

/* Stage readout */
.alignment__readout{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem 1.15rem;align-items:center;
  padding:1.25rem 0 1.75rem;margin-bottom:.5rem;
  border-top:1px solid var(--hair-ink);border-bottom:1px solid var(--hair-ink);
}
.alignment__stage{display:flex;align-items:baseline;gap:.6rem}
.alignment__stage-label{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-on-ink-muted);
}
html[lang^="ar"] .alignment__stage-label{letter-spacing:0;text-transform:none;font-size:.8125rem}
.alignment__stage-num{
  font-family:var(--f-display);font-size:1.75rem;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.alignment__track{height:2px;background:var(--hair-ink);border-radius:2px;overflow:hidden}
.alignment__track-fill{
  display:block;height:100%;width:0;background:var(--gold-grad);
  transition:width 1.1s var(--ease-out);
}
.alignment__state{grid-column:1/-1;font-size:.875rem;color:var(--text-on-ink-muted)}

@media (prefers-reduced-motion:reduce){
  .tooth{translate:0 0;rotate:0deg;transition:none}
  .arch__tray{opacity:1;translate:0 0;transition:none}
  .arch__gum{stroke-dashoffset:0;transition:none}
  .alignment__track-fill{transition:none}
}

/* --------------------------------------------------------------------------
   MODAL  (every CTA opens this, rather than scrolling to a form)
   -------------------------------------------------------------------------- */
.al-modal{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,2.5rem);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-med) var(--ease-out),visibility var(--dur-med);
}
.al-modal.is-open{opacity:1;visibility:visible}

.al-modal__backdrop{
  position:absolute;inset:0;
  background:rgb(8 8 10 / .72);
  backdrop-filter:blur(8px) saturate(.9);
  -webkit-backdrop-filter:blur(8px) saturate(.9);
}
.al-modal__dialog{
  position:relative;
  width:min(100%,46rem);
  max-height:min(92dvh,52rem);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--cream);
  border:1px solid var(--gold-pale);
  border-radius:var(--radius-lg);
  box-shadow:0 40px 120px -30px rgb(0 0 0 / .7);
  padding:clamp(1.75rem,4vw,3rem);
  translate:0 18px;scale:.985;
  transition:translate var(--dur-med) var(--ease-out),scale var(--dur-med) var(--ease-out);
}
.al-modal.is-open .al-modal__dialog{translate:0 0;scale:1}

.al-modal__close{
  position:absolute;inset-block-start:1rem;inset-inline-end:1rem;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--text-muted);background:var(--cream-2);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),rotate var(--dur-fast) var(--ease-out);
  z-index:2;
}
.al-modal__close:hover{background:var(--ink);color:var(--gold-pale);rotate:90deg}
.al-modal__close svg{width:18px;height:18px}

.al-modal__head{margin-bottom:1.75rem;padding-inline-end:3rem}
.al-modal__head h2{font-size:clamp(1.5rem,3vw,2.125rem);margin-bottom:.6rem}
.al-modal__head p{color:var(--text-muted);font-size:.96875rem}

.al-modal .form-panel{background:none;border:0;padding:0;box-shadow:none}
.al-modal .audience-switch{background:var(--cream-2)}

body.modal-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .al-modal,.al-modal__dialog{transition:none}
}

/* --------------------------------------------------------------------------
   MEDIA BLOCKS  (breaks the card-grid monotony)
   -------------------------------------------------------------------------- */
.feature{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.feature + .feature{margin-top:clamp(3.5rem,7vw,6.5rem)}
.feature__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream-2)}
.feature__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.feature--flip .feature__media{order:2}
@media (max-width:860px){.feature--flip .feature__media{order:0}}

/* A gold rule that reads as a frame corner, not a border */
.feature__media::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:38%;height:3px;background:var(--gold-grad);
}

.feature__badge{
  position:absolute;inset-block-start:1rem;inset-inline-start:1rem;
  padding:.45rem 1rem;border-radius:var(--radius-pill);
  background:rgb(13 13 15 / .82);backdrop-filter:blur(8px);
  color:var(--gold-pale);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
html[lang^="ar"] .feature__badge{letter-spacing:0;text-transform:none;font-size:.8125rem}

.feature__list{display:grid;gap:.9rem;margin-top:1.5rem}
.feature__list li{display:flex;gap:.85rem;align-items:flex-start;font-size:.96875rem;color:var(--text-muted)}
.section--ink .feature__list li{color:var(--text-on-ink-muted)}
.feature__list svg{width:19px;height:19px;flex:none;margin-top:.22em;color:var(--gold-deep)}
.section--ink .feature__list svg{color:var(--gold-soft)}

/* --------------------------------------------------------------------------
   IMAGE STRIP  (full-bleed band of three)
   -------------------------------------------------------------------------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2px;background:var(--hair)}
.strip__item{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream-2)}
.strip__item img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease-out)}
.strip__item:hover img{scale:1.06}
.strip__item figcaption{
  position:absolute;inset-inline:0;inset-block-end:0;
  padding:2.5rem 1.5rem 1.4rem;
  background:linear-gradient(transparent,rgb(13 13 15 / .85));
  color:var(--cream);font-size:.9375rem;font-weight:500;
}

/* --------------------------------------------------------------------------
   DIRECT CONTACT LINES
   -------------------------------------------------------------------------- */
.direct-lines{margin-top:clamp(2.5rem,5vw,3.5rem);text-align:center}
.direct-lines__label{
  display:block;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-on-ink-muted);margin-bottom:1.15rem;
}
html[lang^="ar"] .direct-lines__label{letter-spacing:0;text-transform:none;font-size:.875rem}
.direct-lines__row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.direct-lines__item{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 1.35rem;border:1px solid var(--hair-ink);border-radius:var(--radius-pill);
  font-size:.9375rem;color:var(--cream);
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.direct-lines__item svg{width:18px;height:18px;color:var(--gold-soft)}
.direct-lines__item:hover{border-color:var(--gold);color:var(--gold-pale);background:rgb(201 162 39 / .08)}

/* --------------------------------------------------------------------------
   PAGE HERO WITH MEDIA
   -------------------------------------------------------------------------- */
.page-hero--media{overflow:hidden}
.page-hero__bg{position:absolute;inset:0;z-index:0}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.page-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgb(13 13 15 / .55), rgb(13 13 15 / .8) 60%, var(--ink));
}
.page-hero--media > .container{position:relative;z-index:1}
.page-hero .lead{max-width:58ch}

/* --------------------------------------------------------------------------
   STATEMENT
   -------------------------------------------------------------------------- */
.statement{
  max-width:52ch;margin-inline:auto;text-align:center;
  border:0;padding:0;
}
.statement p{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,3.4vw,2.5rem);
  line-height:1.3;
  color:var(--ink);
}
.section--ink .statement p{color:var(--cream)}
.statement p::before,.statement p::after{content:"";display:block;width:2.5rem;height:1px;background:var(--gold);margin:0 auto}
.statement p::before{margin-bottom:1.75rem}
.statement p::after{margin-top:1.75rem}
.statement cite{
  display:block;margin-top:1.25rem;font-style:normal;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
}
.section--ink .statement cite{color:var(--gold-soft)}
html[lang^="ar"] .statement cite{letter-spacing:0;text-transform:none;font-size:.9375rem}

/* Consecutive FAQ blocks on the FAQ page should not each repeat the framing */
.section + .section > .container > .faq{margin-top:0}

/* ==========================================================================
   LUXURY LAYER
   Small, quiet details. Each one is invisible on its own; together they are
   the difference between "a dark website" and something that feels printed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FILM GRAIN
   Flat dark areas read as cheap on screens. A trace of noise gives the ink
   surfaces the texture of coated stock. Kept under 5% so it is felt, not seen.
   -------------------------------------------------------------------------- */
.section--ink,.hero,.page-hero,.cta-band,.site-footer{position:relative}
.section--ink::after,.hero::after,.page-hero::after,.cta-band::after,.site-footer::after{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Content must sit above the grain — but only the content. A blanket
   `> *` rule here also re-positions the absolutely placed background layers,
   which drops them into the flow and pushes the copy off-screen. */
.section--ink > .container,
.hero__inner,
.hero__scroll,
.page-hero > .container,
.cta-band > .container,
.site-footer > .container,
.section--ink > .strip,
.section--ink > .marquee{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   SECTION HAIRLINE
   A single gold rule where two light sections meet, instead of relying on a
   background-colour change alone.
   -------------------------------------------------------------------------- */
.section + .section:not(.section--ink):not(.section--tint)::before,
.section--tint + .section--tint::before{
  content:"";
  position:absolute;inset-block-start:0;inset-inline:var(--gutter);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent);
}

/* --------------------------------------------------------------------------
   IMAGE CORNERS
   A partial gold frame — two corners, not four — so it frames without boxing.
   -------------------------------------------------------------------------- */
.feature__media,.split__media{position:relative}
.feature__media::before{
  content:"";
  position:absolute;z-index:2;
  inset-block-start:1.15rem;inset-inline-start:1.15rem;
  width:2.5rem;height:2.5rem;
  border-block-start:1px solid rgb(240 223 168 / .75);
  border-inline-start:1px solid rgb(240 223 168 / .75);
  opacity:0;translate:.5rem .5rem;
  transition:opacity var(--dur-med) var(--ease-out),translate var(--dur-med) var(--ease-out);
}
.feature__media::after{
  inset-block-end:0;inset-inline-start:0;
}
.feature.in .feature__media::before{opacity:1;translate:0 0;transition-delay:.35s}

/* --------------------------------------------------------------------------
   SECTION HEAD
   More air above the body copy; the heading carries the section on its own.
   -------------------------------------------------------------------------- */
.section-head{margin-bottom:clamp(3rem,6vw,5.5rem)}
.section-head h2 + .lead{margin-top:1.6rem}

/* --------------------------------------------------------------------------
   STEPS — larger numerals, more air, thinner rules
   -------------------------------------------------------------------------- */
.step{padding-block:clamp(2rem,3.6vw,3.25rem)}
.step__num{font-size:clamp(2.25rem,5vw,4.25rem);font-weight:400;letter-spacing:-.03em}
.step__title{font-family:var(--f-display);font-weight:500;letter-spacing:-.01em}
html[lang^="ar"] .step__title{font-family:var(--f-body);font-weight:700}
.step__body{font-weight:300;line-height:1.8}

/* --------------------------------------------------------------------------
   STATS — lighter numerals
   -------------------------------------------------------------------------- */
.stat__num{font-weight:400;font-size:clamp(2.75rem,5.5vw,4.5rem);letter-spacing:-.03em}
.stat__label{font-size:.6875rem;letter-spacing:.24em}

/* --------------------------------------------------------------------------
   GOLD, QUIETER
   A flat bright gold looks like a button; a shallow gradient with a soft
   highlight looks like foil.
   -------------------------------------------------------------------------- */
.btn--gold{
  background:linear-gradient(140deg,#B9932B 0%,#D9BC5E 26%,#F2E3AE 48%,#C9A227 72%,#A5811A 100%);
  color:#241C04;
}
.btn--gold:hover{
  background:linear-gradient(140deg,#C9A227 0%,#E6CE7C 26%,#FAF2D2 48%,#D9BC5E 72%,#B9932B 100%);
}

/* --------------------------------------------------------------------------
   HERO — taller, quieter scrim, slower drift
   -------------------------------------------------------------------------- */
.hero{min-height:min(100dvh,1000px)}
.hero h1{margin-bottom:1.9rem}
.hero__bg img{animation-duration:34s}
.hero__lead{font-weight:300;line-height:1.85}

/* --------------------------------------------------------------------------
   FOOTER — more air
   -------------------------------------------------------------------------- */
.site-footer{padding-block:clamp(4.5rem,8vw,7rem) 0}
.site-footer h4{letter-spacing:.24em;font-size:.6875rem}

/* Word-valued stat: "Fully" instead of a number that would overclaim. */
.stat__num--word{
  font-size:clamp(2rem,3.8vw,3rem);
  font-style:italic;
  letter-spacing:-.01em;
}
html[lang^="ar"] .stat__num--word{font-style:normal;font-size:clamp(1.75rem,3.2vw,2.5rem)}

.stat__sub{
  margin-top:.5rem;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-soft);opacity:.85;
}
html[lang^="ar"] .stat__sub{letter-spacing:0;text-transform:none;font-size:.8125rem}

/* --------------------------------------------------------------------------
   TWO TECHNOLOGIES INTRO
   A cinematic band: the aligner shot sits behind at low opacity so the
   section reads as brand, and the two named cards do the explaining.
   -------------------------------------------------------------------------- */
.tech-intro{overflow:hidden}
.tech-intro__bg{position:absolute;inset:0;z-index:0}
.tech-intro__bg img{width:100%;height:100%;object-fit:cover;opacity:.2}
.tech-intro__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 50% 40%, rgb(201 162 39 / .1), transparent 70%),
    linear-gradient(to bottom, var(--ink), rgb(13 13 15 / .7) 45%, var(--ink));
}
.tech-intro > .container{position:relative;z-index:1}

.tech-pair{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  gap:1px;
  background:var(--hair-ink);
  border:1px solid var(--hair-ink);
  border-radius:var(--radius);
  overflow:hidden;
}
.tech-pair__card{
  display:flex;flex-direction:column;gap:.75rem;
  padding:clamp(2rem,4vw,3.25rem);
  background:rgb(13 13 15 / .55);
  backdrop-filter:blur(6px);
  transition:background var(--dur-med) var(--ease-out);
}
.tech-pair__card:hover{background:rgb(33 33 39 / .75)}

.tech-pair__tag{
  align-self:flex-start;
  padding:.35rem .85rem;
  border:1px solid var(--gold);
  border-radius:var(--radius-pill);
  font-size:.625rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);
}
html[lang^="ar"] .tech-pair__tag{letter-spacing:0;text-transform:none;font-size:.8125rem}

.tech-pair__card h3{
  color:var(--cream);
  font-size:clamp(1.375rem,2.2vw,1.875rem);
  letter-spacing:-.01em;
  margin-top:.3rem;
}
.tech-pair__card p{color:var(--text-on-ink-muted);font-weight:300;flex:1}
.tech-pair__card .link-arrow{align-self:flex-start;color:var(--gold-soft);margin-top:.5rem}
.tech-pair__card:hover .link-arrow{border-color:currentColor;gap:.75rem}