/* Homepage hero, Atlas-style (reference: atlasmotion.com; chosen by Artem 2026-10-02).
   An architectural grid of thin double lines, an intro that draws the grid around the Logika mark, a window that
   opens onto the practice and then fills the screen, and a large uppercase headline laid out across the grid.
   One background video (the operatory after hours) and no scroll effect: Artem dropped the scroll chapters on
   2026-10-02. Atlas' warm sepia is replaced by the Design System 2.0 navy; every colour is a DS 2.0 token or a tint
   of one. The "before" states of the intro only apply once the script has marked the page (html.js), so without
   JavaScript the hero is a plain first screen with every line visible. */

/* the header floats over the hero; its light-on-dark look needs the script that takes it off after the hero */
.ax-page .site-head{position:fixed;left:0;right:0;top:0;transition:background .35s,border-color .35s,opacity .5s}
.js .ax-page .site-head.is-on-dark{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
/* once the page moves, the hero's headline passes under the header: dark frosted glass keeps the nav readable */
.js .ax-page .site-head.is-on-dark.is-scrolled{background:rgba(10,26,46,.62);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border-bottom-color:rgba(244,246,248,.12)}
.js .ax-page .site-head.is-on-dark .brand{color:#f4f6f8}
.js .ax-page .site-head.is-on-dark .nav{gap:6px}
.js .ax-page .site-head.is-on-dark .nav a{padding:6px 9px;border:1px solid rgba(244,246,248,.6);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#f4f6f8}
.js .ax-page .site-head.is-on-dark .nav a:hover{background:rgba(244,246,248,.12)}
.js .ax-page .site-head.is-on-dark .nav a[aria-current="page"]::after{display:none}
.js .ax-page .site-head.is-on-dark .btn--ghost{color:#f4f6f8}
.js .ax-page .site-head.is-on-dark .btn--ghost:hover{background:rgba(244,246,248,.12)}
.js .ax-page .site-head.is-on-dark .btn--secondary{border-radius:0;background:#f4f6f8;color:var(--brand);box-shadow:none;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.ax-intro-on .site-head{opacity:0;pointer-events:none}

/* the first screen */
.ax{position:relative;height:100svh;min-height:560px;overflow:hidden;color:#f4f6f8;background:#0a1a2e;isolation:isolate}

/* media: a window in the centre cell during the intro, the whole screen after it */
.ax-media{position:absolute;inset:0;z-index:0;clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
.ax.is-intro .ax-media{clip-path:inset(50% 50% 50% 50%)}
.ax.is-window .ax-media{clip-path:inset(33.5% 34.6% calc(100.5% - var(--axb)) 34.6%)}
.ax-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease;filter:saturate(.6) contrast(1.05) brightness(.85)}
.js .ax-video{transform:scale(1.06)}
.ax.is-open .ax-video{transform:none}
.ax-tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,31,54,.62) 0%,rgba(11,31,54,.18) 38%,rgba(11,31,54,.28) 62%,rgba(11,31,54,.78) 100%),
             radial-gradient(60% 60% at 70% 30%,rgba(94,189,238,.14),rgba(94,189,238,0) 70%)}
.ax-tint::after{content:"";position:absolute;inset:0;background:rgba(20,48,88,.38);mix-blend-mode:multiply}

/* the architectural grid: thin double lines */
.ax-grid{position:absolute;inset:0;z-index:2;pointer-events:none}
.ax-v,.ax-h{position:absolute;border:0 solid rgba(244,246,248,.18);transition:transform 1s cubic-bezier(.76,0,.24,1)}
.ax-v{top:0;bottom:0;width:8px;border-left-width:1px;border-right-width:1px;transform:scaleY(1);transform-origin:top}
.ax-h{left:0;right:0;height:8px;border-top-width:1px;border-bottom-width:1px;transform:scaleX(1);transform-origin:left}
.ax-v:nth-child(1){left:22%}.ax-v:nth-child(2){left:34.2%}.ax-v:nth-child(3){left:calc(65.8% - 8px)}.ax-v:nth-child(4){left:calc(78% - 8px)}
.ax-h:nth-child(5){top:33%}.ax-h:nth-child(6){top:calc(var(--axb) - 8px)}
.ax.is-intro .ax-v{transform:scaleY(0)}
.ax.is-intro .ax-h{transform:scaleX(0)}
.ax.is-intro.is-lines .ax-v,.ax.is-intro.is-lines .ax-h{transform:none}
.ax-v:nth-child(2),.ax-h:nth-child(6){transition-delay:.12s}
.ax-v:nth-child(3){transition-delay:.2s}.ax-v:nth-child(4){transition-delay:.28s}

/* intro: the mark between the lines, with the two corner labels */
.ax-intro{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;transition:opacity .5s ease .1s}
.ax.is-window .ax-intro,.ax.is-open .ax-intro{opacity:0}
.ax-intro__logo{display:grid;justify-items:center;gap:16px;opacity:0;transform:translateY(8px);transition:opacity .4s ease .05s,transform .4s ease .05s}
.ax.is-lines .ax-intro__logo{opacity:1;transform:none}
.ax-intro__logo img{width:64px;height:auto}
.ax-intro__logo b{font-size:28px;font-weight:600;letter-spacing:.32em;padding-left:.32em}
.ax-tag{position:absolute;display:grid;gap:6px;font-size:13px;font-weight:700;letter-spacing:.06em;opacity:0;transition:opacity .5s ease}
.ax-tag i{display:block;height:18px;background:#f4f6f8}
.ax-tag--a{left:calc(34.2% + 18px);top:calc(33% + 18px)}.ax-tag--a i{width:54px}
.ax-tag--b{right:calc(34.2% + 18px);bottom:calc(100% - var(--axb) + 18px);justify-items:end}.ax-tag--b i{width:44px;order:2}
.ax.is-labels .ax-tag{opacity:1}

/* headline across the grid: two lines above the top rule on the left, two lines resting on the bottom rule on the right */
.ax{--axf:clamp(28px,min(5.2vw,17.3svh - 66px),92px);--axl:calc(var(--axf) * .95);--axb:67%}
.ax-h1{position:absolute;inset:0;z-index:4;margin:0;pointer-events:none;font-size:var(--axf);line-height:.95;font-weight:700;letter-spacing:-.045em;text-transform:uppercase;color:#f4f6f8}
.ax-h1 span{position:absolute;display:block;white-space:nowrap;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.js .ax-h1 span{opacity:0;transform:translateY(24px)}
.ax-h1 .ax-l1{left:calc(22% + 20px);top:calc(33% - var(--axl) * 2 - 14px)}
.ax-h1 .ax-l2{left:calc(22% + 20px);top:calc(33% - var(--axl) - 14px)}
.ax-h1 .ax-l3{right:calc(22% + 20px);top:calc(var(--axb) - 8px - var(--axl) * 2 - 14px);text-align:right}
.ax-h1 .ax-l4{right:calc(22% + 20px);top:calc(var(--axb) - 8px - var(--axl) - 14px);text-align:right}
.ax-h1 .ax-l4 em{font-style:normal;background:var(--grad-text-dark);-webkit-background-clip:text;background-clip:text;color:transparent}
.ax.is-open .ax-h1 span{opacity:1;transform:none}
.ax.is-open .ax-h1 .ax-l2{transition-delay:.05s}
.ax.is-open .ax-h1 .ax-l3{transition-delay:.1s}
.ax.is-open .ax-h1 .ax-l4{transition-delay:.15s}
.ax.is-instant .ax-h1 span,.ax.is-instant .ax-eyebrow,.ax.is-instant .ax-lead,.ax.is-instant .ax-video{transition:none}

/* eyebrow above the headline; the lead and the buttons in the left column under the bottom rule, clear of the
   bottom-right action bar */
.ax-eyebrow{position:absolute;z-index:4;left:calc(22% + 20px);top:calc(33% - var(--axl) * 2 - 46px);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover);transition:opacity .5s ease .1s}
.js .ax-eyebrow{opacity:0}
.ax.is-open .ax-eyebrow{opacity:1}
.ax-lead{position:absolute;z-index:4;left:calc(22% + 20px);top:calc(var(--axb) + 30px);width:min(480px,40vw);font-size:clamp(17px,1.35vw,21px);line-height:1.45;font-weight:500;letter-spacing:-.01em;color:#f4f6f8;transition:opacity .5s ease .15s,transform .5s cubic-bezier(.2,.8,.2,1) .15s}
.js .ax-lead{opacity:0;transform:translateY(20px)}
.ax.is-open .ax-lead{opacity:1;transform:none}
.ax-lead .hero__actions{margin-top:22px}

/* pause for the background video (Rule 42, WCAG 2.2.2): not drawn over the video (Artem, 2026-10-06), it appears
   when the keyboard reaches it, like a skip link; gone once the video has played its three times */
.ax-pause{position:absolute;z-index:4;left:32px;bottom:calc(28px + env(safe-area-inset-bottom));display:none;place-items:center;width:44px;height:44px;border:0;border-radius:50%;color:#f4f6f8;background:rgba(11,31,54,.42);box-shadow:inset 0 0 0 1px rgba(244,246,248,.42);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);cursor:pointer;transition:background .2s}
.js .ax-pause{display:grid}
.ax-pause:not(:focus-visible){opacity:0;pointer-events:none}
.ax-pause:hover{background:rgba(11,31,54,.68)}
.ax-pause .ic{width:16px;height:16px}
.ax.is-novideo .ax-pause,.ax.is-ended .ax-pause{display:none}

/* iPad and phone: one strong column instead of the wide grid */
@media (max-width:1080px){
  .ax-v:nth-child(1){left:8%}.ax-v:nth-child(4){left:calc(92% - 8px)}
  .ax-h1 .ax-l1,.ax-h1 .ax-l2{left:calc(8% + 18px)}
  .ax-h1 .ax-l3,.ax-h1 .ax-l4{right:calc(8% + 18px)}
  .ax-eyebrow{left:calc(8% + 18px)}
  .ax-lead{left:calc(8% + 18px);width:min(520px,76vw);top:auto;bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .ax-v:nth-child(2),.ax-v:nth-child(3){display:none}
  .ax-v:nth-child(1){left:16px}.ax-v:nth-child(4){left:calc(100% - 24px)}
  .ax.is-window .ax-media{clip-path:inset(33.5% 16px calc(100.5% - var(--axb)) 16px)}
  .ax{--axf:clamp(26px,8vw,40px);--axb:61%}
  .ax-h1 .ax-l1,.ax-h1 .ax-l2{left:34px}
  .ax-h1 .ax-l3,.ax-h1 .ax-l4{right:34px}
  .ax-eyebrow{left:34px;top:calc(33% - var(--axl) * 2 - 40px)}
  .ax-tag--a{left:34px}.ax-tag--b{right:34px}
  .ax-lead{left:34px;right:34px;width:auto;bottom:calc(92px + env(safe-area-inset-bottom));font-size:16px}
  .ax-lead .btn--on-navy{display:none}
  .ax-lead .hero__actions{margin-top:16px}
  /* the bottom belongs to the lead and the action bar; the pause moves under the header, on the right */
  .ax-pause{left:auto;right:34px;top:calc(80px + env(safe-area-inset-top));bottom:auto}
}
/* very short phones (320×568): the headline and the button stay, the lead's paragraph would run into the headline */
@media (max-width:640px) and (max-height:600px){
  .ax-lead p{display:none}
  .ax-lead .hero__actions{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .ax-media,.ax-video,.ax-v,.ax-h,.ax-h1 span,.ax-lead,.ax-intro,.ax-intro__logo{transition:none}
  .js .ax-video{transform:none}
}