/* ==========================================================================
   HOME: the page below the locked hero. css/magik.css holds the system (the
   division components in its section 16 do most of the work here) and
   css/hero.css the hero, which this file never touches. This file holds
   only what the homepage alone has, in the order the page runs:

     0  Shared by the scenes: the quiet label, the section titles and the
        signature words (seen, work, move forward)
     1  Which MAGIK are you here for? The three division cards
     2  Made to be seen. The film and its copy panel
     3  Made to work. The hotel system on a bright stage (and the same
        front desk, scaled, as the Tech card's picture)
     4  Made to move forward. The compact journey
     (the invitation, Let's make it real., now opens the shared footer:
     css/magik.css section 13)

   Grounds are #FFFCFC or the house ink only. Labels 12px and up, body 16px
   and up. Nothing moves on hover. Every motion here runs when its heading
   is seen ([data-inview] adds .is-inview) and then rests; under reduced
   motion, and without the script, each piece is simply at rest.

   Cache: linked as /css/pages/home.css?v=N from index.html only; bump N
   when this file changes.
   ========================================================================== */


/* 0  SHARED BY THE SCENES --------------------------------------------------- */

/* a label that is a heading's quiet partner, not the division's accent */
.hm-quiet{ color:var(--m-muted); letter-spacing:.16em; }
.hm-head{ margin-bottom:clamp(24px, 2.4vw, 34px); }
.hm-h2{ font-size:clamp(40px, 4.8vw, 68px); }

/* THE SIGNATURE WORDS (Daniela's, from the Codex homepage): the last word
   of each division line in heavier Archivo, red, with a light that sweeps
   across it once and a drawn underline, each time the heading comes into
   view; then it rests. Its full stop is the red square (css/magik.css),
   which stamps in once. The word is plain red wherever text clipping is
   not supported. */
.hm-sig{
  position:relative; display:inline-block; white-space:nowrap;
  margin-left:.02em; padding-bottom:.06em; vertical-align:-.02em;
  font-family:var(--m-sans); font-style:normal; font-weight:760; font-size:.88em;
  line-height:1.08; letter-spacing:-.06em;
}
.hm-sig-text{ color:#E31B23; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hm-sig-text{
    background-image:linear-gradient(105deg, #D4161E 0%, #E31B23 33%, #FF8A90 50%, #E31B23 67%, #D4161E 100%);
    background-size:300% 100%; background-position:100% 50%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  /* on ink the light is white, as Codex drew it */
  .hm-seen .hm-sig-text{ background-image:linear-gradient(105deg, #EC2535 0%, #FF4B55 33%, #FFFFFF 50%, #FF4B55 67%, #E31B23 100%); }
}
.hm-sig::after{
  content:""; position:absolute; left:0; right:.08em; bottom:-.06em; height:2px;
  background:linear-gradient(90deg, #E31B23, rgba(227,27,35,0) 88%);
  transform-origin:0 50%;
}
/* the word is tracked tight (-.06em), so its square stands a little further off */
.hm-sig .m-sq{ margin-left:.11em; }
.is-inview .hm-sig-text{ animation:hm-sweep 1.8s var(--m-dimmer) .15s both; }
.is-inview .hm-sig::after{ animation:hm-line 1.2s var(--m-dimmer) both; }
@keyframes hm-sweep{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }
@keyframes hm-line{ from{ transform:scaleX(.36); opacity:.4; } to{ transform:none; opacity:1; } }


/* 1  WHICH MAGIK ARE YOU HERE FOR? -------------------------------------------
   Daniela's heading and her card composition: the picture (the Tech one is
   the coded front desk, rising out of the card), the world's verb as a
   pill, the accent bar, the name and services, the round arrow. The whole
   card is one link (.dv-card); hover eases the picture in, lengthens the
   bar, turns the name to the division's colour and fills the arrow. The
   card never moves. Three across; one horizontal card per row on a
   tablet, so every division fits one screen; stacked on phones. */
.hm-divisions{ padding-top:clamp(56px, 6.1vw, 88px); padding-bottom:clamp(64px, 6.7vw, 96px); }
.hm-div-head{ margin-bottom:26px; }
.hm-div-title{ max-width:14ch; font-size:clamp(40px, 4.5vw, 64px); }
.hm-talk{ font-size:16px; }

.hm-cards{ --dv-cols:3; gap:18px; }
.hm-cards .dv-card{ padding-bottom:0; }
.hm-cards .dv-card-media{ aspect-ratio:auto; height:clamp(220px, 19vw, 280px); }
.hm-cards .dv-card-body{ position:relative; flex:1; justify-content:flex-start; gap:6px; padding:18px 76px 20px 20px; }
.hm-cards .dv-card-title{ font-size:25px; font-weight:650; line-height:1.1; letter-spacing:-.03em; transition:color .22s ease; }
.hm-cards .dv-card:hover .dv-card-title{ color:var(--dv-on); }
.hm-card-services{ font-size:12px; font-weight:600; letter-spacing:.07em; line-height:16px; text-transform:uppercase; color:var(--m-muted); }
.hm-cards .dv-card-arrow{ top:50%; right:18px; bottom:auto; margin-top:-20px; }

/* the Tech card's picture: the scene's front desk, drawn at 720px and
   scaled to the card (data-fit sets --fit), under the pill and running off
   the bottom edge like a screen rising out of the card */
.hm-card-desk{ background:radial-gradient(ellipse at 70% 15%, #245265, #10242E 47%, #0C171D); }
.hm-card-desk-box{ position:absolute; top:56px; left:18px; right:18px; bottom:0; overflow:hidden; }
.hm-desk.hm-desk--card{
  position:absolute; left:0; top:0; width:720px; max-width:none; margin:0;
  transform:scale(var(--fit, .45)); transform-origin:0 0;
  transition:transform .55s var(--m-dimmer);
}
.dv-card:hover .hm-desk--card{ transform:scale(calc(var(--fit, .45) * 1.03)); }

@media (max-width:1023px){
  .hm-cards{ --dv-cols:1; gap:14px; }
}
@media (min-width:768px) and (max-width:1023px){
  .hm-cards .dv-card{ flex-direction:row; }
  .hm-cards .dv-card-media{ flex:0 0 50%; height:auto; aspect-ratio:16 / 10; }
  .hm-cards .dv-card-body{ justify-content:center; padding:24px 76px 24px 28px; }
  .hm-cards .dv-card-title{ font-size:28px; }
  .hm-cards .dv-card-arrow{ top:auto; bottom:20px; margin-top:0; }
}
@media (max-width:767px){
  .hm-divisions{ padding-top:56px; padding-bottom:64px; }
  .hm-div-title{ font-size:clamp(36px, 10vw, 48px); }
  .hm-cards .dv-card-media{ height:auto; aspect-ratio:16 / 9; }
  .hm-cards .dv-card-body{ min-height:76px; padding:14px 72px 14px 18px; }
  .hm-cards .dv-card-title{ font-size:23px; }
  .hm-cards .dv-card-arrow{ right:16px; }
}


/* 2  MADE TO BE SEEN ---------------------------------------------------------
   The Codex feature: the film large on the left, the copy panel on the
   right, in one frame on the ink. The film is the shared player (true
   16:9, its bar beneath the picture, nothing over it); the panel's words
   sit at the bottom, level with the bar. */
.hm-feature{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, 30%);
  background-color:#15191C; border:1px solid rgba(255,252,252,.12);
}
.hm-film{ max-width:none; min-width:0; }
.hm-film .m-film-bar{ margin-top:0; min-height:64px; padding:10px 18px; border-top:1px solid rgba(255,252,252,.12); }
.hm-feature-copy{
  display:flex; flex-direction:column; min-width:0;
  padding:32px 28px 10px; border-left:1px solid rgba(255,252,252,.12);
}
.hm-feature-title{
  margin-top:22px;
  font-family:var(--m-sans); font-size:clamp(30px, 2.65vw, 38px); font-weight:600;
  line-height:1.02; letter-spacing:-.035em; color:var(--m-text);
}
.hm-feature-more{ margin-top:auto; padding-top:24px; }
.hm-feature-text{ font-size:16px; line-height:1.6; color:var(--m-muted); }
.hm-feature-text a{
  color:var(--m-text); text-decoration:underline; text-decoration-color:rgba(255,252,252,.5);
  text-decoration-thickness:1px; text-underline-offset:.2em;
}
.hm-feature-text a:hover{ text-decoration-color:currentColor; text-decoration-thickness:2px; }
.hm-feature-more .dv-link{ margin-top:14px; text-wrap:balance; }

@media (max-width:1023px){
  .hm-feature{ grid-template-columns:minmax(0, 1fr); }
  .hm-feature-copy{ padding:28px 28px 20px; border-left:0; border-top:1px solid rgba(255,252,252,.12); }
}
@media (min-width:768px) and (max-width:1023px){
  .hm-feature-copy{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows:auto 1fr; column-gap:32px; }
  .hm-feature-title{ align-self:start; }
  .hm-feature-copy > .dv-eyebrow, .hm-feature-title{ grid-column:1; }
  .hm-feature-more{ grid-column:2; grid-row:1 / span 2; margin-top:0; padding-top:0; }
}
@media (max-width:767px){
  .hm-film .m-film-bar{ padding:10px 14px; gap:6px 18px; }
  .hm-feature-copy{ padding:24px 20px 16px; }
  .hm-feature-title{ margin-top:16px; }
  .hm-feature-more{ margin-top:0; padding-top:16px; }
}


/* 3  MADE TO WORK ------------------------------------------------------------
   Daniela's bright scene: the copy on the left, the hotel system on a light
   stage on the right (a faint 26px grid, like a product studio). On
   tablets and phones the stage comes first, then the copy. */
.hm-tech{
  display:grid; grid-template-columns:minmax(0, .72fr) minmax(0, 1.28fr);
  gap:clamp(34px, 4.5vw, 72px); align-items:center;
}
.hm-tech-copy{ grid-column:1; grid-row:1; min-width:0; }
.hm-stage{ grid-column:2; grid-row:1; min-width:0; }
.hm-tech-title{
  font-family:var(--m-sans); font-weight:650; font-size:clamp(38px, 4.2vw, 58px);
  line-height:.98; letter-spacing:-.04em; color:var(--m-text);
}
/* the voice turn: the hero headline's setting at the title's own size */
.hm-tech-title em{
  font-family:var(--m-display); font-style:normal; font-weight:900; font-stretch:90%;
  font-size:1em; letter-spacing:-.02em; text-transform:uppercase; color:var(--dv-accent-light);
}
.hm-tech-text{ max-width:440px; margin-top:22px; font-size:16px; line-height:1.65; color:var(--m-muted); }
.hm-tech-rows{ margin-top:26px; }
.hm-tech-rows .dv-row{ grid-template-columns:minmax(0, 1fr) auto; min-height:56px; padding:10px 0; }
.hm-tech-rows .dv-row-label{ font-size:16px; }

.hm-stage{
  position:relative; padding:25px;
  background-color:#FFFFFF;
  background-image:linear-gradient(rgba(10,5,6,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10,5,6,.045) 1px, transparent 1px);
  background-size:26px 26px; background-position:-1px -1px;
  border:1px solid rgba(10,5,6,.1);
}
.hm-desk-link{ display:block; }
.hm-desk-link:focus-visible{ outline-offset:6px; }
.hm-desk--scene{ --dv-window-max:760px; box-shadow:0 18px 44px rgba(12,22,29,.2); transition:border-color .22s ease; }
.hm-desk-link:hover .hm-desk--scene{ border-color:rgba(175,203,211,.7); }

@media (max-width:1023px){
  .hm-tech{ grid-template-columns:minmax(0, 1fr); gap:32px; }
  .hm-tech-copy, .hm-stage{ grid-column:1; grid-row:auto; }
}
@media (min-width:768px) and (max-width:1023px){
  .hm-tech-copy{ display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1fr); column-gap:40px; align-items:start; }
  .hm-tech-text{ margin-top:4px; }
}
@media (max-width:767px){
  .hm-stage{ padding:9px; }
  .hm-tech-title{ font-size:38px; }
}

/* THE FRONT DESK: a coded hotel interface in the shared window (the bar
   reads "Hotel system"). It lays itself out by its own width (a container
   query), so the same markup is the scaled card picture and the scene:
   wide, it has its menu, four figures, the week and the next arrivals side
   by side, and the room board; narrow (a phone), the figures go two by
   two and the arrivals step out. Nothing inside is a control: the whole
   window is one link. Every label is 12px or more. */
.hm-desk{ container:hmdesk / inline-size; background-color:#0B151A; font-variant-numeric:tabular-nums; }
.hm-desk-body{ display:grid; grid-template-columns:minmax(0, 1fr); }
.hm-desk-side{ display:none; }
.hm-desk-side span{ display:block; padding:8px 10px; border-radius:4px; font-size:13px; line-height:1.3; color:#A9BBBD; white-space:nowrap; }
.hm-desk-side span.is-on{ background-color:#16272E; color:#FFFFFF; }
.hm-desk-main{ display:flex; flex-direction:column; gap:12px; min-width:0; padding:16px 16px 18px; }
.hm-desk-kick{ font-size:12px; font-weight:600; letter-spacing:.14em; line-height:16px; text-transform:uppercase; color:#8FA6A8; }
.hm-desk-h{ margin-top:4px; font-size:18px; font-weight:600; line-height:1.25; color:#E6EFEC; }
.hm-desk-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.hm-kpi{ display:flex; flex-direction:column; min-width:0; padding:10px 12px; background-color:#111F25; border:1px solid #1E2F36; border-radius:4px; }
.hm-kpi-l, .hm-kpi-n{ font-size:12px; line-height:16px; color:#8FA6A8; }
.hm-kpi-v{ margin:4px 0 2px; font-size:24px; font-weight:600; line-height:1.1; letter-spacing:-.02em; color:#E6EFEC; white-space:nowrap; }
.hm-desk-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; }
.hm-desk-panel{ min-width:0; padding:10px 12px 12px; background-color:#111F25; border:1px solid #1E2F36; border-radius:4px; }
.hm-desk-cap{ margin-bottom:8px; font-size:12px; line-height:16px; color:#8FA6A8; }
.hm-bars{ display:flex; align-items:flex-end; gap:7px; height:78px; border-bottom:1px solid #2A3E46; }
.hm-bars i{ flex:1; height:var(--v); background-color:#53C7A4; border-radius:2px 2px 0 0; }
.hm-bars i.is-today{ background-color:#E31B23; }
.hm-days{ display:flex; gap:7px; margin-top:4px; }
.hm-days span{ flex:1; min-width:0; text-align:center; white-space:nowrap; font-size:12px; line-height:16px; color:#8FA6A8; }
.hm-days span:last-child{ color:#E6EFEC; }
.hm-desk-arr{ display:none; }
/* on a phone the scene keeps to the figures and the week */
.hm-desk--scene .hm-desk-rooms{ display:none; }
.hm-arr{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid #1E2F36; font-size:13px; line-height:1.35; color:#E6EFEC; }
.hm-desk-cap + .hm-arr{ padding-top:2px; border-top:0; }
.hm-arr small{ margin-left:6px; font-size:12px; color:#8FA6A8; }
.hm-arr em{ font-style:normal; font-size:12px; color:#A9BBBD; }
.hm-rooms{ display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:4px; }
.hm-rooms i{ display:block; height:14px; border-radius:2px; background-color:#53C7A4; }
.hm-rooms-key{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; font-size:12px; line-height:16px; color:#A9BBBD; }
.hm-rooms-key span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.hm-rooms-key span::before{ content:""; flex:none; width:9px; height:9px; border-radius:2px; background-color:#53C7A4; }
/* state by form and colour, always named in the key */
.hm-rooms [data-s="arr"], .hm-rooms-key [data-s="arr"]::before{ background-color:#6FA8DC; }
.hm-rooms [data-s="ready"], .hm-rooms-key [data-s="ready"]::before{ background-color:transparent; box-shadow:inset 0 0 0 1.5px #E6EFEC; }
.hm-rooms [data-s="clean"], .hm-rooms-key [data-s="clean"]::before{ background-color:#E0A84A; }
.hm-rooms [data-s="out"], .hm-rooms-key [data-s="out"]::before{ background:repeating-linear-gradient(135deg, #F0444A 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 1px #F0444A; }
/* the narrowest phones: the figures stay whole */
@container hmdesk (max-width:340px){
  .hm-desk-main{ padding:14px 12px 14px; }
  .hm-kpi{ padding:10px; }
  .hm-kpi-v{ font-size:20px; }
}
@container hmdesk (min-width:560px){
  .hm-desk-kpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .hm-kpi-v{ font-size:22px; }
  .hm-desk-grid{ grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); }
  .hm-desk-arr, .hm-desk--scene .hm-desk-rooms{ display:block; }
  .hm-desk-rooms{ grid-column:1 / -1; }
  .hm-rooms{ grid-template-columns:repeat(20, minmax(0, 1fr)); }
}
@container hmdesk (min-width:700px){
  .hm-desk-body{ grid-template-columns:150px minmax(0, 1fr); }
  .hm-desk-side{ display:flex; flex-direction:column; gap:2px; padding:14px 10px; border-right:1px solid #1E2F36; }
  .hm-desk-main{ padding:16px 18px 18px; }
}


/* 4  MADE TO MOVE FORWARD ----------------------------------------------------
   The shared journey, compact: one line walked together, the five stages
   with their voice lines, and the one honest line. The pair of figures
   stands at the start, on the grass strip: the player at the line's
   centre, the parent or guardian a step in front at the strip's foot (3px
   lower; the drawing's own offsets), the ball resting on the grass. */
.hm-sub{ margin-top:14px; font-size:20px; line-height:1.4; color:#536059; }
.hm-journey .dv-journey-scene > .hm-figures{ width:auto; height:63px; max-width:none; margin-bottom:-4.4px; }
.hm-coda{ font-size:16px; line-height:1.55; color:var(--jn-body); }
@media (max-width:767px){
  .hm-sub{ font-size:18px; }
}