/* =====================================================================================
   LayonMed - theme v2 "Surgical Atlas", ORIGINAL COLOURS (Michel, 13 Oct: "keep the colors
   as they were, I like the style though"), plus ONE change from round 3: the dark navy bottom
   (home closing block + footers). The round-3 editorial layout was rejected -> theme-src-v3-editorial.css.
   Style only: new type (Archivo / Instrument Sans / Fragment Mono), square buttons, cards as
   drawing sheets with CAD corner marks, open sections on a ruled line, left-aligned heroes on a
   millimetre ruler, dashed "cut lines" - all drawn in the site's own navy and teal.
   Every colour comes from the pages' own tokens (--bg, --surface, --surface2, --navy, --accent,
   --accent2, --text-*, --border); nothing here re-colours a page.
   Rule: never change text-transform - i18n.js keys translations by on-screen text.
   ===================================================================================== */

body[data-theme-v2]{
  --line-ink:var(--navy,#0a2442);
  --line-cut:var(--accent,#2eb8a0);
  --hair:var(--border,rgba(10,36,66,.12));
  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-mono:'Fragment Mono',ui-monospace,monospace;
  --fsa-display:.43; --display-stretch:106%; --display-weight:560;
  /* CAD corner marks for every "sheet" */
  --tick:var(--line-ink);
  --ticks:
    linear-gradient(var(--tick),var(--tick)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 100% 100%/1px 10px no-repeat;
  --ticks-hover:
    linear-gradient(var(--line-cut),var(--line-cut)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--line-cut),var(--line-cut)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--line-cut),var(--line-cut)) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--line-cut),var(--line-cut)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--line-cut),var(--line-cut)) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--line-cut),var(--line-cut)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--line-cut),var(--line-cut)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--line-cut),var(--line-cut)) 100% 100%/1px 10px no-repeat;
  /* millimetre ruler: 1 mm = 6 px ticks, every 10th long */
  --ruler:
    repeating-linear-gradient(90deg,var(--line-ink) 0 1px,transparent 1px 60px) 0 100%/100% 14px no-repeat,
    repeating-linear-gradient(90deg,rgba(10,36,66,.35) 0 1px,transparent 1px 6px) 0 100%/100% 6px no-repeat;
  /* the dashed cut line, in the brand teal */
  --cut:linear-gradient(90deg,var(--line-cut) 0 60%,transparent 60% 100%) 0 100%/9px 2px repeat-x;

  font-family:var(--f-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:auto;
}
body[data-theme-v2] p, body[data-theme-v2] li{text-wrap:pretty}
body[data-theme-v2] h1, body[data-theme-v2] h2, body[data-theme-v2] h3{text-wrap:balance}


/* ===== font map (generated by build_theme.py - do not edit) ===== */
body[data-theme-v2],
body[data-theme-v2] .deliverable h3,
body[data-theme-v2] .field input,
body[data-theme-v2] .field select,
body[data-theme-v2] .field textarea,
body[data-theme-v2] .field label .opt,
body[data-theme-v2] .stat-num,
body[data-theme-v2] input,
body[data-theme-v2] textarea{font-family:var(--f-body)}
body[data-theme-v2] .application-card .tag,
body[data-theme-v2] .aud-btn,
body[data-theme-v2] .author-role,
body[data-theme-v2] .back,
body[data-theme-v2] .badge,
body[data-theme-v2] .block-label,
body[data-theme-v2] .btn,
body[data-theme-v2] .btn-ghost,
body[data-theme-v2] .btn-primary,
body[data-theme-v2] .caption,
body[data-theme-v2] .case-caption,
body[data-theme-v2] .case-legend,
body[data-theme-v2] .casebox .lbl,
body[data-theme-v2] .casebox .num,
body[data-theme-v2] .company .co-name,
body[data-theme-v2] .company dt,
body[data-theme-v2] .consult-aside .price span,
body[data-theme-v2] .consult-aside .price-label,
body[data-theme-v2] .cta-eyebrow,
body[data-theme-v2] .diagram-ai-badge,
body[data-theme-v2] .diagram-caption,
body[data-theme-v2] .diagram-label,
body[data-theme-v2] .divider span,
body[data-theme-v2] .draft-banner strong,
body[data-theme-v2] .eyebrow,
body[data-theme-v2] .family-text .tag,
body[data-theme-v2] .field label,
body[data-theme-v2] .fileinfo,
body[data-theme-v2] .fileinfo button,
body[data-theme-v2] .foot,
body[data-theme-v2] .foot .disc,
body[data-theme-v2] .footer-col-title,
body[data-theme-v2] .footer-company,
body[data-theme-v2] .footer-contact,
body[data-theme-v2] .footer-copy,
body[data-theme-v2] .hero-actions a,
body[data-theme-v2] .hero-eyebrow,
body[data-theme-v2] .label,
body[data-theme-v2] .marquee-item,
body[data-theme-v2] .method .tag,
body[data-theme-v2] .nav-cta,
body[data-theme-v2] .nav-cta-green,
body[data-theme-v2] .osteotomy-caption,
body[data-theme-v2] .osteotomy-card .full-name,
body[data-theme-v2] .osteotomy-card .tag,
body[data-theme-v2] .pct,
body[data-theme-v2] .product-tag,
body[data-theme-v2] .pullquote-label,
body[data-theme-v2] .ref,
body[data-theme-v2] .req-btn,
body[data-theme-v2] .req-callout .req-eyebrow,
body[data-theme-v2] .req-lang,
body[data-theme-v2] .section-eyebrow,
body[data-theme-v2] .section-label,
body[data-theme-v2] .service-features li,
body[data-theme-v2] .service-modal-eyebrow,
body[data-theme-v2] .service-modal-meta,
body[data-theme-v2] .service-num,
body[data-theme-v2] .stage,
body[data-theme-v2] .stat-label,
body[data-theme-v2] .step .n,
body[data-theme-v2] .step-num,
body[data-theme-v2] .step-tag,
body[data-theme-v2] .submit-btn,
body[data-theme-v2] .tech-stat-label,
body[data-theme-v2] .todo,
body[data-theme-v2] .trust span,
body[data-theme-v2] .visual-text .tag,
body[data-theme-v2] .workflow-step .num,
body[data-theme-v2] footer,
body[data-theme-v2] h3,
body[data-theme-v2] th{font-family:var(--f-mono);font-weight:400;letter-spacing:.07em}
body[data-theme-v2] .application-card h3,
body[data-theme-v2] .card h2,
body[data-theme-v2] .consult-aside .price b,
body[data-theme-v2] .cta-block h3,
body[data-theme-v2] .cta-title,
body[data-theme-v2] .deliverable .num,
body[data-theme-v2] .direct h2,
body[data-theme-v2] .drop h3,
body[data-theme-v2] .family-text h3,
body[data-theme-v2] .footer-tagline,
body[data-theme-v2] .hero h1,
body[data-theme-v2] .method h3,
body[data-theme-v2] .movement-list dt,
body[data-theme-v2] .note-card h3,
body[data-theme-v2] .osteotomy-card .name,
body[data-theme-v2] .osteotomy-visual-title .name,
body[data-theme-v2] .planning-list dt,
body[data-theme-v2] .product-name,
body[data-theme-v2] .pullquote,
body[data-theme-v2] .req-callout h2,
body[data-theme-v2] .section h2,
body[data-theme-v2] .section-title,
body[data-theme-v2] .service-modal-title,
body[data-theme-v2] .service-name,
body[data-theme-v2] .specialty-name,
body[data-theme-v2] .step h3,
body[data-theme-v2] .step-card h3,
body[data-theme-v2] .step-num,
body[data-theme-v2] .step-title,
body[data-theme-v2] .tech-stat-val,
body[data-theme-v2] .testimonial-quote,
body[data-theme-v2] .visual-text h3,
body[data-theme-v2] .workflow-step h3,
body[data-theme-v2] h1,
body[data-theme-v2] h2{font-family:var(--f-display);font-size-adjust:var(--fsa-display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-style:normal;letter-spacing:-.012em}
body[data-theme-v2] [style*="Cormorant"]{font-family:var(--f-display)!important;font-size-adjust:var(--fsa-display);font-style:normal!important}
body[data-theme-v2] [style*="DM Mono"]{font-family:var(--f-mono)!important}
body[data-theme-v2] [style*="Outfit"]:not(.brand):not(.nav-logo){font-family:var(--f-body)!important}
/* ===== end font map ===== */

/* ---------- global ---------- */
body[data-theme-v2] strong, body[data-theme-v2] b{font-weight:600}
body[data-theme-v2] .grid-bg,
body[data-theme-v2] .cursor{display:none!important}
body[data-theme-v2] .service-card, body[data-theme-v2] .specialty-card, body[data-theme-v2] .tech-item,
body[data-theme-v2] .product-card, body[data-theme-v2] a, body[data-theme-v2] button{cursor:pointer}

/* accent words: upright, keep their teal, sit on a dashed cut line */
body[data-theme-v2] h1 em, body[data-theme-v2] h2 em, body[data-theme-v2] h3 em,
body[data-theme-v2] .hero-title em, body[data-theme-v2] .section-title em, body[data-theme-v2] .cta-title em{
  font-style:normal; background:var(--cut); padding-bottom:.06em;
}

/* ---------- labels / eyebrows ---------- */
body[data-theme-v2] .eyebrow,
body[data-theme-v2] .section-eyebrow,
body[data-theme-v2] .req-eyebrow,
body[data-theme-v2] .section-label,
body[data-theme-v2] .cta-eyebrow,
body[data-theme-v2] .hero-eyebrow{font-size:11px}
body[data-theme-v2] .eyebrow::before,
body[data-theme-v2] .section-eyebrow::before{
  content:"";display:inline-block;width:22px;height:2px;margin:0 12px 3px 0;vertical-align:middle;background:var(--cut);
}

/* ---------- navigation ---------- */
body[data-theme-v2] .nav-links a{font-family:var(--f-mono);letter-spacing:.08em}

/* ---------- buttons: square + mono; colours stay the page's own ---------- */
body[data-theme-v2] .btn, body[data-theme-v2] .btn-primary, body[data-theme-v2] .btn-ghost,
body[data-theme-v2] .nav-cta, body[data-theme-v2] .nav-cta-green, body[data-theme-v2] .back,
body[data-theme-v2] .req-btn, body[data-theme-v2] .submit-btn, body[data-theme-v2] .hero-actions a,
body[data-theme-v2] .aud-btn, body[data-theme-v2] .cta-actions a{
  border-radius:0!important; font-family:var(--f-mono)!important; font-weight:400!important;
  letter-spacing:.08em!important; box-shadow:none!important;
}
body[data-theme-v2] .btn-primary::after{display:none}

/* ---------- sub-page hero: left-aligned title on a millimetre ruler ---------- */
body[data-theme-v2] header.hero{
  text-align:left; max-width:1180px; margin:0 auto; padding:118px 60px 74px;
  overflow:visible; position:relative;
}
body[data-theme-v2] header.hero::after{content:"";position:absolute;left:60px;right:60px;bottom:0;height:14px;background:var(--ruler);pointer-events:none}
body[data-theme-v2] header.hero h1{font-size:clamp(46px,7.4vw,104px);line-height:.98;letter-spacing:-.025em}
body[data-theme-v2] header.hero .subtitle{margin:30px 0 0;max-width:640px;font-size:18px;line-height:1.6}
body[data-theme-v2] header.hero .hero-actions{justify-content:flex-start}
body[data-theme-v2] header.hero > *{animation:v2-rise .8s cubic-bezier(.2,.7,.15,1) both}
body[data-theme-v2] header.hero > :nth-child(2){animation-delay:.05s}
body[data-theme-v2] header.hero > :nth-child(3){animation-delay:.14s}
body[data-theme-v2] header.hero > :nth-child(4){animation-delay:.24s}
body[data-theme-v2] header.hero > :nth-child(5){animation-delay:.34s}
@keyframes v2-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- sections: open sheets that start on a ruled line ---------- */
body[data-theme-v2] main.content{max-width:1180px}
body[data-theme-v2] header.hero + main.content{padding-top:44px}
body[data-theme-v2] .content .section{
  background:transparent; border:0; border-top:1px solid var(--line-ink); padding:40px 0 24px; margin:0 0 56px;
  box-shadow:none;
}
body[data-theme-v2] .content .section h2{font-size:54px;line-height:1.04;margin-bottom:16px}
body[data-theme-v2] .section-intro{font-size:17px}

/* ---------- every card is a drawing sheet with corner marks (fill = the site's card blue) ---------- */
body[data-theme-v2] .step, body[data-theme-v2] .note-card, body[data-theme-v2] .step-card,
body[data-theme-v2] .card, body[data-theme-v2] .osteotomy-card, body[data-theme-v2] .method,
body[data-theme-v2] .deliverable, body[data-theme-v2] .planning-box, body[data-theme-v2] .procedure-explainer .movements,
body[data-theme-v2] .specialty-card, body[data-theme-v2] .service-card, body[data-theme-v2] .tech-item,
body[data-theme-v2] .testimonial, body[data-theme-v2] .product-card, body[data-theme-v2] .consult-aside,
body[data-theme-v2] .linkgrid a, body[data-theme-v2] .onlay-family, body[data-theme-v2] .osteotomy-visual-row,
body[data-theme-v2] .case-box, body[data-theme-v2] .principle, body[data-theme-v2] .company{
  background:var(--ticks),var(--surface2,#eaf1f6)!important; border:1px solid var(--hair)!important; border-radius:0!important;
  box-shadow:none!important; transition:border-color .25s, transform .25s;
}
body[data-theme-v2] .step:hover, body[data-theme-v2] .note-card:hover, body[data-theme-v2] .step-card:hover,
body[data-theme-v2] .osteotomy-card:hover, body[data-theme-v2] .specialty-card:hover, body[data-theme-v2] .service-card:hover,
body[data-theme-v2] .tech-item:hover, body[data-theme-v2] .linkgrid a:hover{border-color:var(--accent,#2eb8a0)!important;background:var(--ticks-hover),var(--surface2,#eaf1f6)!important;box-shadow:0 0 0 1px rgba(46,184,160,.18), 0 10px 26px rgba(46,184,160,.12)!important;transform:translateY(-2px)}
body[data-theme-v2] .step h3, body[data-theme-v2] .note-card h3, body[data-theme-v2] .step-card h3,
body[data-theme-v2] .specialty-name, body[data-theme-v2] .service-name{font-size:24px;line-height:1.12}
body[data-theme-v2] .step .n, body[data-theme-v2] .step-num, body[data-theme-v2] .deliverable .num{font-family:var(--f-mono)!important}

/* figures read as atlas plates */
body[data-theme-v2] .frame, body[data-theme-v2] .osteotomy-frame, body[data-theme-v2] .process-image-frame,
body[data-theme-v2] .service-icon, body[data-theme-v2] .figure .frame{border-radius:0!important}

/* ---------- dark blocks keep their navy; square, opened by a teal cut line ---------- */
body[data-theme-v2] .cta-block, body[data-theme-v2] .req-callout{border-radius:0!important; position:relative}
body[data-theme-v2] .cta-block::before, body[data-theme-v2] .req-callout::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; mask-image:none; -webkit-mask-image:none;
  background:linear-gradient(90deg,var(--line-cut) 0 60%,transparent 60% 100%) 0 0/12px 2px repeat-x;
}

/* ---------- forms: square ---------- */
body[data-theme-v2] input:not([type=checkbox]):not([type=radio]):not([type=file]), body[data-theme-v2] select,
body[data-theme-v2] textarea{border-radius:0!important; font-family:var(--f-body)!important}
body[data-theme-v2] .drop, body[data-theme-v2] .trust span, body[data-theme-v2] .overlay .card{border-radius:0!important}

/* legal pages */
body[data-theme-v2] .legal-wrap h2{font-size:30px;border-top:1px solid var(--hair);padding-top:26px}
body[data-theme-v2] .draft-banner{border-radius:0}

/* ---------- navy bottom (Michel 13 Oct: "keep the dark area at bottom"): home closing block + every footer ---------- */
body[data-theme-v2] footer, body[data-theme-v2] .cta-section{
  --text:#f4f7f9; --text-dim:rgba(244,247,249,.8); --text-muted:rgba(244,247,249,.58);
  --border:rgba(244,247,249,.16); --hair:rgba(244,247,249,.16);
  background:var(--line-ink)!important; color:rgba(244,247,249,.72)!important; border-top:0!important; position:relative;
}
body[data-theme-v2] .cta-bg{display:none!important}
body[data-theme-v2] footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--line-cut) 0 60%,transparent 60% 100%) 0 0/12px 2px repeat-x;
}
body[data-theme-v2] .cta-section + footer::before{background:rgba(244,247,249,.14);height:1px}
body[data-theme-v2] footer a{color:rgba(244,247,249,.88)!important;border-color:rgba(244,247,249,.25)!important}
body[data-theme-v2] footer a:hover{color:#fff!important}
body[data-theme-v2] .footer-links a{font-family:var(--f-body)!important;letter-spacing:0!important;font-size:15px}
body[data-theme-v2] .footer-tagline{color:#f4f7f9!important}
body[data-theme-v2] .footer-col-title{color:var(--line-cut)!important}
body[data-theme-v2] .cta-title{color:#f4f7f9!important}
body[data-theme-v2] .cta-desc{color:rgba(244,247,249,.75)!important}
body[data-theme-v2] .cta-section .btn-ghost{color:#f4f7f9!important;border-color:rgba(244,247,249,.45)!important;background:transparent!important}
body[data-theme-v2] .cta-section .btn-ghost:hover{background:#f4f7f9!important;color:var(--line-ink)!important}

/* ===================== home page ===================== */
body[data-theme-v2] section.hero::after{content:"";position:absolute;left:60px;right:60px;bottom:0;height:14px;background:var(--ruler);pointer-events:none}
body[data-theme-v2] .hero-sub{font-size:18px!important;max-width:620px}
body[data-theme-v2] .hero-logo-wrap{animation:v2-rise .9s cubic-bezier(.2,.7,.15,1) both}
body[data-theme-v2] .hero-stats{gap:0!important;border-top:1px solid var(--line-ink);border-bottom:1px solid var(--hair)}
body[data-theme-v2] .hero-stats .stat{padding:18px 40px;border-right:1px solid var(--hair)}
body[data-theme-v2] .hero-stats .stat:last-child{border-right:0}
body[data-theme-v2] .stat-num{font-family:var(--f-display)!important;font-stretch:112%;font-weight:600!important}
body[data-theme-v2] .marquee-item{font-family:var(--f-mono)!important}
body[data-theme-v2] .services-grid{gap:18px!important}
body[data-theme-v2] .service-card::before{background:var(--cut)!important;height:2px}
body[data-theme-v2] .process-step .step-num{font-family:var(--f-display)!important;font-stretch:112%;font-weight:500!important;font-size:30px!important;letter-spacing:-.02em!important}
body[data-theme-v2] .tech-stat-card{border-radius:0!important}
body[data-theme-v2] .tech-stat-val{font-family:var(--f-display)!important;font-stretch:112%}

/* ===================== responsive ===================== */
@media (max-width:820px){
  body[data-theme-v2] h1, body[data-theme-v2] h2, body[data-theme-v2] h3, body[data-theme-v2] p, body[data-theme-v2] li{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  body[data-theme-v2] header.hero{padding:84px 24px 56px}
  body[data-theme-v2] header.hero::after, body[data-theme-v2] section.hero::after{left:24px;right:24px}
  body[data-theme-v2] header.hero h1{font-size:clamp(40px,11vw,64px)}
  body[data-theme-v2] .content .section h2{font-size:38px}
  body[data-theme-v2] .hero-stats .stat{padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){
  body[data-theme-v2] header.hero > *, body[data-theme-v2] .hero-logo-wrap{animation:none}
}

/* =====================================================================================
   SLOW BACKGROUND MOTION (Michel 13 Oct: "I don't like the animations too much... more in the
   background it should have some movable things, very slowly... or slight move in and outs").
   Nothing in front moves any more. Behind the content: soft brand-colour light that drifts and
   swells, and faint contour rings (like CT slice outlines) that turn and breathe, very slowly.
   Visitors whose system asks for reduced motion get the same shapes, standing still.
   ===================================================================================== */
html:has(body[data-theme-v2])::before{
  content:""; position:fixed; inset:-18vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(30vmax 26vmax at 16% 20%,rgba(46,184,160,.14),transparent 70%),
    radial-gradient(36vmax 30vmax at 86% 34%,rgba(10,36,66,.07),transparent 70%),
    radial-gradient(32vmax 28vmax at 58% 88%,rgba(46,184,160,.10),transparent 70%);
}
html:has(body[data-theme-v2])::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle closest-side at 50% 50%,rgba(26,143,122,0.150) 0,rgba(26,143,122,0.096) 72%,rgba(26,143,122,0.081) 93%,rgba(26,143,122,0) 100%) 88% 10%/clamp(210px,27vw,415px) clamp(210px,27vw,415px) no-repeat,
    radial-gradient(circle closest-side at 50% 50%,rgba(126,232,212,0.220) 0,rgba(126,232,212,0.141) 72%,rgba(126,232,212,0.119) 93%,rgba(126,232,212,0) 100%) 6% 78%/clamp(160px,21vw,320px) clamp(160px,21vw,320px) no-repeat;
}
body[data-theme-v2] .cta-section, body[data-theme-v2] .cta-block{overflow:hidden}
body[data-theme-v2] .cta-section::after, body[data-theme-v2] .cta-block::after{
  content:""; position:absolute; inset:-30%; pointer-events:none; z-index:0;
  background:
    radial-gradient(32% 42% at 28% 38%,rgba(46,184,160,.18),transparent 70%),
    radial-gradient(28% 36% at 74% 66%,rgba(46,184,160,.10),transparent 70%);
}
body[data-theme-v2] .cta-section > *, body[data-theme-v2] .cta-block > *{position:relative;z-index:1}

@media (prefers-reduced-motion:no-preference){
  html:has(body[data-theme-v2])::before{animation:v2-light 46s ease-in-out infinite alternate}
  html:has(body[data-theme-v2])::after{animation:v2-balls-b 56s ease-in-out infinite alternate}
  body[data-theme-v2] .cta-section::after, body[data-theme-v2] .cta-block::after{animation:v2-drift 40s ease-in-out infinite alternate}
  /* pictures: a slight move-in while you look at them */
  body[data-theme-v2] .frame img, body[data-theme-v2] .osteotomy-frame img, body[data-theme-v2] .service-icon{transition:transform 5s cubic-bezier(.2,.6,.2,1)}
  body[data-theme-v2] .frame:hover img, body[data-theme-v2] .osteotomy-frame:hover img,
  body[data-theme-v2] .service-card:hover .service-icon{transform:scale(1.03)}
}
@keyframes v2-light{
  0%{transform:translate3d(-3vmax,-2vmax,0) scale(1);opacity:.85}
  50%{transform:translate3d(2vmax,3vmax,0) scale(1.07);opacity:1}
  100%{transform:translate3d(4vmax,-1vmax,0) scale(.97);opacity:.8}
}
@keyframes v2-turn{to{rotate:360deg}}
@keyframes v2-breathe{from{scale:.94;opacity:.7}to{scale:1.06;opacity:1}}
@keyframes v2-drift{from{transform:translate3d(-4%,-3%,0) rotate(0deg)}to{transform:translate3d(5%,4%,0) rotate(8deg)}}

/* ---------- home: big, almost transparent balls floating slowly behind LayonMed (Michel 13 Oct:
   "big almost transparent balls moving... not planets"). Two layers drift in different directions
   and speeds so the balls pass each other; they also swell in and out a little. ---------- */
body[data-theme-v2] section.hero{isolation:isolate}
body[data-theme-v2] .hero-grid-bg, body[data-theme-v2] .hero-glow{
  display:block!important; position:absolute!important; inset:-6% -4%!important; z-index:-1; pointer-events:none;
  width:auto!important; height:auto!important; border-radius:0!important; transform:none!important; opacity:1!important;
  mask-image:none!important; -webkit-mask-image:none!important; animation:none;
}
body[data-theme-v2] .hero-grid-bg{background:
    radial-gradient(circle closest-side at 50% 50%,rgba(46,184,160,0.190) 0,rgba(46,184,160,0.122) 72%,rgba(46,184,160,0.103) 93%,rgba(46,184,160,0) 100%) 8% 12%/clamp(210px,24vw,370px) clamp(210px,24vw,370px) no-repeat,
    radial-gradient(circle closest-side at 50% 50%,rgba(126,232,212,0.240) 0,rgba(126,232,212,0.154) 72%,rgba(126,232,212,0.130) 93%,rgba(126,232,212,0) 100%) 62% 92%/clamp(240px,27vw,415px) clamp(240px,27vw,415px) no-repeat!important
}
body[data-theme-v2] .hero-glow{background:
    radial-gradient(circle closest-side at 50% 50%,rgba(10,36,66,0.070) 0,rgba(10,36,66,0.045) 72%,rgba(10,36,66,0.038) 93%,rgba(10,36,66,0) 100%) 92% 58%/clamp(190px,21vw,320px) clamp(190px,21vw,320px) no-repeat!important
}
@media (prefers-reduced-motion:no-preference){
  body[data-theme-v2] .hero-grid-bg{animation:v2-balls-a 38s ease-in-out infinite alternate!important}
  body[data-theme-v2] .hero-glow{animation:v2-balls-b 51s ease-in-out infinite alternate!important}
}
@keyframes v2-balls-a{0%{translate:-3vw -2vw;scale:.96}50%{translate:2vw 2.5vw;scale:1.04}100%{translate:4vw -1.5vw;scale:.98}}
@keyframes v2-balls-b{0%{translate:3vw 2vw;scale:1.03}50%{translate:-2.5vw -1.5vw;scale:.95}100%{translate:-4vw 2.5vw;scale:1.05}}

/* the home page has its own balls in the hero: no second set there */
html:has(body[data-theme-v2] section.hero)::after{display:none}

/* ---------- tablet (Michel 13 Oct: "improve for mobile and tablet"): home cards in two columns
   instead of one long single column; an odd last card spans the full row ---------- */
@media (min-width:641px) and (max-width:1024px){
  body[data-theme-v2] .services-grid, body[data-theme-v2] .specialties-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-theme-v2] .services-grid > .service-card:last-child:nth-child(odd),
  body[data-theme-v2] .specialties-grid > .specialty-card:last-child:nth-child(odd){grid-column:1 / -1!important}
  body[data-theme-v2] .service-icon{height:240px!important}
}
/* long German/Turkish compounds also break cleanly on landscape tablets (QA: for-surgeons DE @1024) */
@media (max-width:1100px){
  body[data-theme-v2] h1, body[data-theme-v2] h2, body[data-theme-v2] h3, body[data-theme-v2] p, body[data-theme-v2] li{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}
@media (max-width:1100px){
  body[data-theme-v2] .notes-grid > *, body[data-theme-v2] .steps > *, body[data-theme-v2] .step-grid > *,
  body[data-theme-v2] .linkgrid > *{min-width:0}
  body[data-theme-v2] .note-card h3, body[data-theme-v2] .step h3, body[data-theme-v2] .step-card h3{overflow-wrap:anywhere}
}

/* ---------- the injected widgets (cookie banner, chat, language menu) in the same type + square buttons;
   the old Cormorant / DM Mono fonts are no longer loaded (only Outfit stays, for the LayonMed wordmark) ---------- */
body[data-theme-v2] .lm-cc, body[data-theme-v2] .lm-cc *,
body[data-theme-v2] .lm-chat-panel, body[data-theme-v2] .lm-chat-panel *{font-family:var(--f-body)!important}
body[data-theme-v2] .lm-cc button, body[data-theme-v2] .lm-chip, body[data-theme-v2] .lm-chat-panel button,
body[data-theme-v2] .lm-lang-btn, body[data-theme-v2] .lm-lang-item, body[data-theme-v2] .lm-lang-code{font-family:var(--f-mono)!important;letter-spacing:.04em}
body[data-theme-v2] .lm-cc button, body[data-theme-v2] .lm-chip{border-radius:0!important}
body[data-theme-v2] .footer-logo, body[data-theme-v2] .footer-logo span, body[data-theme-v2] code{font-family:var(--f-mono)!important}

/* Michel 13 Oct: "dont show the continuous and dotted line together" - the millimetre ruler under a
   page top is never followed by a solid rule: the first section after the hero opens without its line,
   and the home stats lose their bottom line above the ruler */
body[data-theme-v2] header.hero + main.content > .section:first-child{border-top:0!important;padding-top:6px}
body[data-theme-v2] .hero-stats{border-bottom:0!important}
/* ...and no dashed line on top of a card's solid border when hovering (home solution cards) */
body[data-theme-v2] .service-card::before{display:none!important}

/* ===================== PHONE POLISH (Michel 13 Oct: "did you improve it also for the mobile?") ===================== */
@media (max-width:600px){
  /* top bar: logo left, language right, on one line on every page */
  body[data-theme-v2] .page-nav{flex-direction:row!important;align-items:center!important;gap:12px!important}
  /* upload buttons: full width, one line each */
  body[data-theme-v2] .picks{flex-direction:column!important;align-items:stretch!important}
  body[data-theme-v2] .picks .btn{width:100%;white-space:nowrap;flex:0 0 auto!important;height:auto!important;min-height:0!important;padding:15px 16px!important}
  /* home: the line under the wordmark is centred text, no side rules that break oddly */
  body[data-theme-v2] .hero-eyebrow{justify-content:center!important;text-align:center;line-height:1.75}
  body[data-theme-v2] .hero-eyebrow::before, body[data-theme-v2] .hero-eyebrow::after{display:none!important}
  /* service pages: before / after drawings side by side, so they can be compared and the page is half as long */
  body[data-theme-v2] .image-grid:has(> :nth-child(2)), body[data-theme-v2] .osteotomy-visual-grid,
  body[data-theme-v2] .osteotomy-visual-grid.all-images{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body[data-theme-v2] .osteotomy-visual-grid.three-images figure:nth-child(3){grid-column:1 / -1!important;justify-self:center;width:calc((100% - 10px)/2)!important}
  body[data-theme-v2] .image-grid.three .figure:nth-child(3){grid-column:1 / -1!important;width:100%!important}
  body[data-theme-v2] .image-grid:has(> :nth-child(2)) .frame, body[data-theme-v2] .osteotomy-visual-grid .osteotomy-frame{height:auto!important;aspect-ratio:1/1}
  body[data-theme-v2] .image-grid.three .figure:nth-child(3) .frame{aspect-ratio:2/1}
  body[data-theme-v2] .caption, body[data-theme-v2] .osteotomy-caption{font-size:8.5px!important;letter-spacing:.03em!important;line-height:1.4}
}