/* ============================================================
   אתר המותג של הטכניון
   Page stylesheet. Loads after base.css and only holds what this
   page owns: the hero, the brand toolbox, the logo showroom, the
   typography specimen, the colour field and colour wall, the
   template gallery, the guidelines accordion and the identity
   finale.

   Tokens, header, footer, buttons, icons, the reveal system and
   the motion policy all live in base.css. No token is redefined
   here.

   Two traps from HANDOFF.md govern most of the choices below:
     .reveal.is-in sets transform:none, so anything carrying
     .reveal moves with `translate` instead, and any element that
     needs a further transition has to declare the whole list a
     second time inside the reduced motion block.
   ============================================================ */

/* several components set display, so [hidden] has to win */
[hidden]{ display:none !important; }

/* the labelled frame that stands in for media that is not supplied yet */
.is-missing .ph{ display:flex; }

/* ============================================================
   PAGE SHELL
   No floating contact rail on this page, so the room base.css
   reserves for the mobile dock is given back, and the
   accessibility widget returns to the screen edge.
   ============================================================ */
@media (max-width:1024px){
  body{ padding-bottom:0; }
}
@media (max-width:767px){
  /* clears the floating quick navigation, which sits at the foot of the
     screen once the toolbox has scrolled away */
  .a11y{ bottom:92px; }
}

.dark{ position:relative; background:var(--navy); isolation:isolate; }

/* every quick navigation destination stops below the floating header
   instead of behind it */
#logo,#fonts,#colors,#templates,#guidelines,#identity{
  scroll-margin-top:calc(var(--hdr-top) + var(--hdr-h) + var(--s4));
}

.sec--toolbox{ padding-block:96px 104px; background:var(--white); }
.sec--logo{ padding-block:104px; background:var(--pale); }
.sec--type{ padding-block:104px; background:var(--white); }
.sec--color{ padding-block:104px; background:var(--white); }
.sec--tpl{ padding-block:80px 88px; }
.sec--guide{ padding-block:104px; background:var(--pale); }
.sec--identity{ padding-block:112px 120px; overflow:hidden; }

.sec__lead{
  max-width:760px; margin-top:calc(var(--s5) * -1 + 4px);
  margin-bottom:var(--s7);
  font-size:20px; line-height:1.65; color:var(--body);
}
.sec__lead--mid{ max-width:640px; margin:0 auto var(--s7); text-align:center; }
.sec__lead--light{ color:var(--on-navy-2); }
/* the lead of a section that follows a sub heading, not the rule */
.sub__title + .sec__lead{ margin-top:var(--s2); }

.sub__title{
  margin-top:var(--s7);
  font-size:26px; font-weight:600; color:var(--navy);
}
.sec--color > .wrap > .sub__title:first-of-type{ margin-top:0; }


/* ============================================================
   HERO
   Same shell and the same entrance choreography as the contact
   page: the picture is the top of the document and the header
   floats on it.
   ============================================================ */
/* The copy block is centred in the band that is left under the floating
   header, not in the whole picture. The header already owns the top of the
   hero, so the top padding carries its full height while the bottom padding
   only carries the matching optical margin: that puts equal air above and
   below the group inside the area a reader actually sees as empty. */
.hero{
  position:relative;
  min-height:790px;
  display:flex; align-items:center;
  padding-top:calc(var(--hdr-top) + var(--hdr-h) + var(--s5));
  padding-bottom:var(--s5);
  background:var(--navy-deep);
}
.hero__media{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  background:var(--navy-deep);
}
.hero__layer{
  position:absolute; left:0; right:0; top:-3%; bottom:-3%;
  display:block; overflow:hidden;
  will-change:transform;
}
/* the video fills the layer the way the picture did. Fixed intrinsic size
   on the element plus an absolutely positioned layer means nothing can
   shift while it loads, and the poster covers the first moment. */
.hero__media > .hero__layer > .hero__video{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.07);
  pointer-events:none;
}
.hero__media.is-missing .hero__layer > .hero__video{ display:none; }
.hero__media.is-missing .hero__layer{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px);
}
/* The supplied hero picture is a light one, so the veil carries the
   contrast: a navy field down the reading side where the copy sits, fading
   off to the left so the picture stays the picture. Measured against the
   picture in use, white text keeps 7.6:1 over the title band, which is
   still above AAA while letting a good deal more of the image through. */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Exactly two layers, both linear, and nothing else is ever added here.
     1. the reading side: a straight left to right ramp that holds through
        the copy and then decays across the whole remaining width, so it
        has no edge where it starts and no point where it ends. It is
        written in many small steps because a ramp with few stops changes
        slope abruptly at each one, and that kink is what reads as a line.
     2. a short foot, so the picture meets the white section below it
        instead of stopping dead.
     No radial gradient belongs here: an ellipse is strong in the middle
     and weak at the top and bottom, which is exactly what a straight
     reading edge must not do. */
  background:
    linear-gradient(to left,
      rgba(0,20,45,.87) 0%,
      rgba(0,20,45,.862) 26%,
      rgba(0,20,45,0.85) 47%,
      rgba(0,20,45,0.783) 49.6%,
      rgba(0,20,45,0.718) 52.3%,
      rgba(0,20,45,0.655) 55.0%,
      rgba(0,20,45,0.595) 57.6%,
      rgba(0,20,45,0.536) 60.2%,
      rgba(0,20,45,0.48) 62.9%,
      rgba(0,20,45,0.427) 65.5%,
      rgba(0,20,45,0.375) 68.2%,
      rgba(0,20,45,0.327) 70.8%,
      rgba(0,20,45,0.28) 73.5%,
      rgba(0,20,45,0.237) 76.2%,
      rgba(0,20,45,0.196) 78.8%,
      rgba(0,20,45,0.158) 81.5%,
      rgba(0,20,45,0.124) 84.1%,
      rgba(0,20,45,0.092) 86.8%,
      rgba(0,20,45,0.065) 89.4%,
      rgba(0,20,45,0.041) 92.0%,
      rgba(0,20,45,0.021) 94.7%,
      rgba(0,20,45,0.007) 97.3%,
      rgba(0,20,45,0) 100%),
    linear-gradient(to top,
      rgba(0,20,45,.34) 0%,
      rgba(0,20,45,.06) 18%,
      rgba(0,20,45,0) 30%);
}










.hero--noimg .hero__veil{ opacity:.25; }
.hero__media .ph{ inset:var(--s3) var(--s3) auto; padding-block:var(--s5); }

.hero__inner{ position:relative; z-index:2; }
/* Two lines by declaration, not by chance. A narrower headline lets the
   veil pull back to the right, which is what uncovers the hand drawing
   the mark in the video behind it. */
.hero__title{
  color:var(--white);
  font-size:88px; font-weight:500; line-height:1.04;
  letter-spacing:-.015em; margin:0;
  text-shadow:0 2px 26px rgba(0,20,45,.6), 0 1px 3px rgba(0,20,45,.3);
}
.hero__title2{ display:block; }
.hero__lede{
  margin-top:var(--s4);
  max-width:660px;
  color:var(--white);
  font-size:20px; line-height:1.65;
  text-shadow:0 1px 18px rgba(0,20,45,.55);
}
.hero__cta{ margin-top:var(--s5); }
/* white pill, brand navy label, a little taller than a standard button */
.hero__btn{ padding:16px 30px; font-size:17px; }

/* hero entrance choreography. base.css drives the title and the lede,
   the picture wrapper and its zoom are declared here because this page
   carries the image inside .hero__layer rather than directly. */
.hero__media{ clip-path:inset(0 0 100% 0); }
.hero__title,.hero__lede{ opacity:0; transform:translateY(26px); }
.is-ready .hero__media > .hero__layer > .hero__video{
  transform:scale(1);
  transition:transform 1.8s var(--ease) .1s;
}
body.hc .hero__media > .hero__layer > .hero__video{ display:none; }

/* the button joins the hero choreography that base.css runs on the
   title and the lede */
.hero__cta{ opacity:0; transform:translateY(26px); }
.is-ready .hero__cta{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) .95s, transform .7s var(--ease) .95s;
}

/* scroll cue, the circle holds still and only the chevron loops */
.scroller{
  position:absolute; z-index:3;
  left:50%; bottom:0; transform:translate(-50%, 50%);
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:var(--white); color:var(--navy);
  box-shadow:var(--sh-disc);
  transition:background-color var(--t-fast), box-shadow var(--t-mid), transform var(--t-mid);
}
.scroller:hover{
  background:var(--sky);
  box-shadow:var(--sh-disc-up);
  transform:translate(-50%, calc(50% - 2px));
}
.scroller:focus-visible{ outline:3px solid var(--white); outline-offset:3px; }
.scroller__ico{ width:22px; height:22px; animation:cue 1.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes cue{
  0%,100% { transform:translateY(-4px); }
  50%     { transform:translateY(5px); }
}


/* ============================================================
   BRAND TOOLBOX
   Six tiles, each one drawing its own subject. Hover inverts the
   tile, the drawing answers and the chevron leaves.
   ============================================================ */
.box{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s5);
}
.tool{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--s3);
  height:100%;
  padding:var(--s4) var(--s4) var(--s4) var(--s3);
  border-radius:var(--r-card);
  background:var(--sky);
  color:var(--navy);
  overflow:hidden;
  transition:color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid);
}
/* the navy fill grows from the reading edge instead of switching */
.tool::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--navy);
  transform:scaleX(0); transform-origin:right;
  transition:transform .48s var(--ease);
}
.tool > *{ position:relative; z-index:1; }
.tool:hover,.tool:focus-visible{ color:var(--white); transform:translateY(-4px); box-shadow:var(--sh-card); }
.tool:hover::before,.tool:focus-visible::before{ transform:scaleX(1); }

.tool__art{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  color:var(--navy);
  transition:color var(--t-mid), transform var(--t-mid);
}
.tool__art svg{ width:100%; height:100%; }
.tool:hover .tool__art{ color:var(--gold); transform:translateY(-3px); }

.tool__body{ display:grid; gap:4px; min-width:0; }
.tool__title{ font-size:22px; font-weight:600; line-height:1.2; }
/* The line of a tile is a sentence, so it is given room to sit on one, and
   where a width cannot hold it the break is balanced rather than left with
   a single word stranded underneath. */
.tool__sub{
  font-size:15px; line-height:1.45; color:var(--blue-mid);
  text-wrap:balance;
  transition:color var(--t-mid);
}
.tool:hover .tool__sub{ color:var(--on-navy-2); }

.tool__chev{ color:var(--navy); transition:transform var(--t-mid), color var(--t-mid); }
.tool:hover .tool__chev{ color:var(--gold); transform:translateX(-8px); }

/* Every drawing waits for its tile and then draws itself. The paths carry
   pathLength="1" in the markup, so one duration fits them all.

   These are transitions and not keyframe animations on purpose. A keyframe
   animation holds its own value over the class it belongs to, so if it is
   ever left unstarted the artwork stays parked at the hidden end. With a
   transition the class alone already describes the drawn state, and the
   motion is only how it gets there. */
.tool__ln,.tool__rule,.tool__slide{
  stroke-dasharray:1; stroke-dashoffset:1;
}
.box__cell.is-in .tool__ln,
.box__cell.is-in .tool__rule,
.box__cell.is-in .tool__slide{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .9s var(--ease);
}
.box__cell.is-in .tool svg > *:nth-child(1){ transition-delay:.16s; }
.box__cell.is-in .tool svg > *:nth-child(2){ transition-delay:.26s; }
.box__cell.is-in .tool svg > *:nth-child(3){ transition-delay:.36s; }
.box__cell.is-in .tool svg > *:nth-child(4){ transition-delay:.46s; }
.box__cell.is-in .tool svg > *:nth-child(5){ transition-delay:.56s; }
.box__cell.is-in .tool svg > *:nth-child(6){ transition-delay:.66s; }


/* the four swatches of the colour tile */
.tool__art--swatch{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  place-items:stretch; gap:3px; padding:3px;
}
.tsw{ display:block; border-radius:5px; opacity:0; transform:scale(.6); }
.box__cell.is-in .tsw{ opacity:1; transform:none; transition:opacity .4s var(--ease), transform .5s var(--ease); }
.box__cell.is-in .tsw--1{ transition-delay:.18s; }
.box__cell.is-in .tsw--2{ transition-delay:.26s; }
.box__cell.is-in .tsw--3{ transition-delay:.34s; }
.box__cell.is-in .tsw--4{ transition-delay:.42s; }
/* brand guide colours, shown here as the subject of the tile */
.tsw--1{ background:#002147; }
.tsw--2{ background:#D59F0F; }
.tsw--3{ background:#32B1CA; }
.tsw--4{ background:#AE3B72; }
.tool:hover .tsw--1{ background:var(--white); }
.tsw{ transition:background-color var(--t-mid); }

/* Aa */
.tool__art--aa{ font-size:24px; font-weight:600; line-height:1; letter-spacing:-.02em; }
.tool__art--aa span{ display:block; opacity:0; transform:translateY(10px); }
.box__cell.is-in .tool__art--aa span{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease) .2s, transform .55s var(--ease) .2s;
}

/* the emblem itself, swapped rather than recoloured */
.tool__art--mark{ position:relative; }
.tool__mark{
  position:absolute; inset:0; margin:auto;
  width:auto; height:100%;
  transition:opacity var(--t-mid), transform var(--t-mid);
}
.tool__mark--white{ opacity:0; }
.tool:hover .tool__mark--navy{ opacity:0; }
.tool:hover .tool__mark--white{ opacity:1; }
.tool__art--mark .tool__mark{ opacity:0; transform:scale(.86); }
.box__cell.is-in .tool__mark--navy{ opacity:1; transform:none; transition:opacity .5s var(--ease) .18s, transform .6s var(--ease) .18s; }
.box__cell.is-in .tool:hover .tool__mark--navy{ opacity:0; }
.box__cell.is-in .tool:hover .tool__mark--white{ opacity:1; transform:none; }


/* ============================================================
   FLOATING QUICK NAVIGATION
   The compact form of the brand toolbox, for the rest of the page.
   Same white pill, same navy, same shadow family as every other
   floating element on the site.
   ============================================================ */
.qnav{
  position:fixed; z-index:96;
  left:50%; bottom:24px;
  transform:translate(-50%, 20px);
  max-width:calc(100vw - 32px);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), transform .42s var(--ease), visibility .3s;
}
.qnav.is-on{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
.qnav:focus-within{ opacity:1; visibility:visible; }

.qnav__list{
  display:flex; align-items:center; gap:2px;
  padding:6px;
  background:var(--white);
  border-radius:var(--r-pill);
  box-shadow:0 10px 34px rgba(0,33,71,.22);
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
}
.qnav__list::-webkit-scrollbar{ display:none; }

.qnav__item{
  display:block; white-space:nowrap;
  padding:9px 17px;
  border-radius:var(--r-pill);
  font-size:15px; font-weight:500; color:var(--navy);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.qnav__item:hover{ background:var(--sky); }
.qnav__item.is-here{ background:var(--navy); color:var(--white); }


/* ============================================================
   LOGO SHOWROOM
   A sticky index on the reading edge, one large stage beside it.
   ============================================================ */
.show{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:var(--s7); align-items:start; }

/* the rule between the index and the stage. A hairline in --line was too
   close to the section surface to read as the edge of anything. */
.show__nav{
  position:sticky; top:calc(var(--hdr-top) + var(--hdr-h) + var(--s5));
  display:grid; gap:2px;
  padding-left:var(--s5);
  border-left:2px solid var(--pale-3);
}
.show__tab{
  position:relative;
  display:block;
  padding:var(--s3) var(--s4);
  border-radius:var(--r-in);
  text-align:right;
  color:var(--navy-ink);
  transition:color var(--t-mid), background-color var(--t-mid);
}
.show__tab:hover{ color:var(--navy); background:var(--sky); }
/* the live version takes the navy container, so which one is on the
   stage is legible at a glance */
.show__tab.is-on{ background:var(--navy); color:var(--white); }
.show__name{ font-size:19px; font-weight:500; line-height:1.35; }
/* the qualifier is a line of its own, never half of it riding up */
.show__name2{ display:block; white-space:nowrap; }

/* an aside between the approved versions and the restricted ones, so it
   carries the weight of running text and not of a heading */
.show__note{
  margin:var(--s5) var(--s4) var(--s3);
  padding-top:var(--s4);
  border-top:1px solid var(--pale-3);
  font-size:15px; font-weight:400; line-height:1.6; color:var(--muted);
}

.show__stage{ position:relative; min-width:0; }
.stage{ min-width:0; }
.stage__title{ font-size:32px; font-weight:500; line-height:1.2; }
.stage__text{ margin-top:var(--s2); max-width:640px; font-size:18px; line-height:1.6; color:var(--body); }

.marks{
  margin-top:var(--s6);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s5);
}
.marks--single{ grid-template-columns:minmax(0,1fr); max-width:440px; }

.mark{ display:grid; gap:var(--s3); }
.mark__frame{
  position:relative; overflow:hidden;
  display:block;
  aspect-ratio:25 / 16;
  border-radius:var(--r-card);
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--sh-soft);
  transition:box-shadow var(--t-mid), transform var(--t-mid);
}
.mark__frame--navy{ background:var(--navy); border-color:var(--navy); }
.mark__frame--seal{ aspect-ratio:1 / 1; }
/* the logo files are transparent, the frame supplies the background, and
   the padding is here so a replacement file with no clear space of its own
   still breathes */
.mark__frame img{
  width:100%; height:100%; object-fit:contain;
  padding:5%;
  transition:transform var(--t-slow);
}
.mark:hover .mark__frame{ box-shadow:var(--sh-card); transform:translateY(-3px); }
.mark:hover .mark__frame img{ transform:scale(1.035); }
.mark__frame .ph{ inset:var(--s3); }
.mark__frame.is-missing img{ display:none; }

.mark__acts{ display:flex; gap:var(--s2); opacity:.72; transition:opacity var(--t-mid); }
.mark:hover .mark__acts{ opacity:1; }

/* small download pill, same shape language as every other control */
/* Download control. The edge is deliberately a full pixel at a brand
   colour rather than a hairline in --line: the tint was too close to the
   surfaces it sits on to read as a boundary. */
.dl{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px;
  border-radius:var(--r-pill);
  border:1px solid rgba(0,33,71,.42);
  background:var(--white);
  color:var(--navy);
  font-size:15px; font-weight:500; line-height:1.4;
  transition:background-color var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), transform var(--t-fast);
}
.dl .ico{ color:var(--navy); transition:color var(--t-fast), transform var(--t-mid); }
.dl:hover{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.dl:hover .ico{ color:var(--gold); transform:translateY(2px); }
.dl:active{ transform:translateY(1px); }

.dl--on-dark{
  background:transparent; border-color:rgba(255,255,255,.66); color:var(--white);
}
.dl--on-dark .ico{ color:var(--gold); }
.dl--on-dark:hover{ background:var(--white); border-color:var(--white); color:var(--navy); }
.dl--on-dark:hover .ico{ color:var(--navy); }

/* the stage swaps rather than jumps */
.stage{ opacity:0; translate:0 12px; }
.stage.is-live{
  opacity:1; translate:0 0;
  transition:opacity .42s var(--ease), translate .5s var(--ease);
}
.stage.is-live .mark{ opacity:0; translate:0 16px; }
.stage.is-live .mark{ animation:markIn .55s var(--ease) forwards; }
.stage.is-live .mark:nth-child(1){ animation-delay:.10s; }
.stage.is-live .mark:nth-child(2){ animation-delay:.19s; }
.stage.is-live .mark:nth-child(3){ animation-delay:.28s; }
.stage.is-live .mark:nth-child(4){ animation-delay:.37s; }
@keyframes markIn{ to{ opacity:1; translate:0 0; } }


/* ============================================================
   TYPOGRAPHY SPECIMEN
   The name of the face is the picture. Both faces are typeset in
   the site face, see README.md.
   ============================================================ */
.spec{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0; }
.spec__col{
  padding:var(--s6) var(--s7) var(--s7);
  border-radius:var(--r-card);
  transition:background-color var(--t-slow);
}
.spec__col:first-child{ border-left:1px solid var(--line); border-radius:var(--r-card) 0 0 var(--r-card); }
.spec__col:hover,.spec__col.is-hot{ background:var(--pale); }

/* Assistant is self hosted for this one purpose: a specimen has to be set
   in the face it names. It is scoped to the specimen and never reaches the
   interface, which stays on Noto Sans Hebrew. */
.spec__col--assistant .spec__name,
.spec__col--assistant .spec__row{
  font-family:'Assistant','Noto Sans Hebrew',sans-serif;
}
.spec__name{
  font-size:78px; font-weight:600; line-height:1;
  letter-spacing:-.03em; color:var(--navy);
  white-space:nowrap;
}
.spec__name span{
  display:inline-block;
  opacity:0; transform:translateY(24px);
}
.spec__col.is-in .spec__name span{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease), transform .62s var(--ease);
}
.spec__col.is-in .spec__name span:nth-child(1){ transition-delay:.06s; }
.spec__col.is-in .spec__name span:nth-child(2){ transition-delay:.10s; }
.spec__col.is-in .spec__name span:nth-child(3){ transition-delay:.14s; }
.spec__col.is-in .spec__name span:nth-child(4){ transition-delay:.18s; }
.spec__col.is-in .spec__name span:nth-child(5){ transition-delay:.22s; }
.spec__col.is-in .spec__name span:nth-child(6){ transition-delay:.26s; }
.spec__col.is-in .spec__name span:nth-child(7){ transition-delay:.30s; }
.spec__col.is-in .spec__name span:nth-child(8){ transition-delay:.34s; }
.spec__col.is-in .spec__name span:nth-child(9){ transition-delay:.38s; }

.spec__sizes{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line); display:grid; gap:var(--s3); }
.spec__row{ color:var(--navy); line-height:1.15; }
.spec__row--lg{ font-size:44px; font-weight:500; letter-spacing:-.02em; }
.spec__row--md{ font-size:26px; font-weight:400; color:var(--blue-mid); }
.spec__use{ margin-top:var(--s5); font-size:18px; line-height:1.6; color:var(--body); max-width:420px; }
.spec__act{ margin-top:var(--s5); }
.spec__col .btn .ico{ transition:transform var(--t-mid); }
.spec__col .btn:hover .ico{ transform:translateY(2px); }
.spec__col .btn--solid{ border:1px solid rgba(0,33,71,.42); }


/* ============================================================
   BRAND COLOURS
   ============================================================ */
/* The primary block is the ratio the copy describes, drawn: the
   blue holds the field, the gold is the thin complement. */
.prim{
  display:flex;
  height:360px;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--sh-card);
}
.prim > *{
  position:relative;
  display:flex; align-items:flex-end;
  padding:var(--s4);
  transform-origin:right;
  transition:flex-grow .5s var(--ease);
}
/* the blue holds the field and the gold is the thin complement, which is
   the 10:1 relation the copy describes. Black and white are the neutrals
   that sit beside it, not part of that ratio. */
.prim__blue{ flex:10 1 0; background:#002147; }
.prim__gold{ flex:2.1 1 0; background:#D59F0F; }
.prim__black{ flex:2.6 1 0; background:#000000; }
.prim__white{ flex:2.6 1 0; background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(0,33,71,.20); }
.prim:hover .prim__gold{ flex-grow:4; }
.prim:hover .prim__black,.prim:hover .prim__white{ flex-grow:4.2; }
.prim:hover .prim__blue{ flex-grow:6.6; }
.prim > *{ transition:flex-grow .5s cubic-bezier(.4,0,.2,1); }

.prim__tag{ display:grid; gap:3px; }
.prim__nm{ font-size:20px; font-weight:600; white-space:nowrap; }
.prim__hex{ font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.prim__role{ font-size:13px; line-height:1.45; }
.prim__blue .prim__role{ font-size:15px; }
.prim__gold .prim__role{ font-size:14px; }
.prim__blue .prim__tag{ color:var(--white); }
.prim__blue .prim__role{ color:var(--on-navy-2); }
.prim__gold .prim__tag{ color:#002147; }
.prim__black .prim__tag{ color:var(--white); }
/* the plane is white, so its own labels are navy */
.prim__white .prim__tag{ color:#002147; }

/* each plane grows out of the reading edge as the block arrives */
.prim > *{ transform:scaleX(0); }
.prim.is-in > *{
  transform:scaleX(1);
  transition:transform .8s var(--ease), flex-grow .5s var(--ease);
}
.prim.is-in .prim__gold{ transition-delay:.22s, 0s; }
.prim.is-in .prim__black{ transition-delay:.34s, 0s; }
.prim__tag{ opacity:0; }
.prim.is-in .prim__tag{ opacity:1; transition:opacity .5s var(--ease) .6s; }

/* --- the colour wall --------------------------------------- */
.wall{
  display:flex; gap:0;
  height:420px;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--sh-card);
}
.wall__col{
  position:relative;
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s4);
  background:var(--c);
  color:var(--on);
  transition:flex-grow .5s cubic-bezier(.4,0,.2,1);
}
/* the colour under the pointer takes the room the others give up. Only
   flex-grow moves, so nothing reflows outside the wall and the strip keeps
   its own width. */
.wall:hover .wall__col{ flex-grow:.7; }
/* both selectors have to reach the same specificity as the rule above,
   or the shrink would win over the column under the pointer */
.wall .wall__col:hover,
.wall .wall__col:focus-within{ flex-grow:3.5; }

.wall__name{
  font-size:19px; font-weight:600; white-space:nowrap;
  transition:transform var(--t-mid);
}
.wall .wall__col:hover .wall__name,
.wall .wall__col:focus-within .wall__name{ transform:translateY(-2px); }

.wall__data{
  position:absolute; right:var(--s4); left:var(--s4); bottom:52px;
  display:grid; gap:2px;
  min-width:0;
  opacity:0; transform:translateY(10px);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .38s var(--ease);
}
.wall .wall__col:hover .wall__data,
.wall .wall__col:focus-within .wall__data{
  opacity:1; transform:none; pointer-events:auto; transition-delay:.18s;
}
/* the name of a squeezed neighbour would otherwise push its column wider
   than the share it was given */
.wall:hover .wall__col .wall__name{ opacity:.72; }
.wall .wall__col:hover .wall__name,
.wall .wall__col:focus-within .wall__name{ opacity:1; }
.wall__row{ display:flex; gap:8px; font-size:14px; white-space:nowrap; }
.wall__k{ opacity:.72; min-width:62px; }
.wall__v{ font-variant-numeric:tabular-nums; }

.wall__hex{
  display:inline-flex; align-items:center; gap:6px;
  justify-self:start;
  margin-top:var(--s2);
  padding:5px 12px;
  border-radius:var(--r-pill);
  border:1px solid currentColor;
  font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;
  transition:background-color var(--t-fast), color var(--t-fast);
}
/* navy fill and white text in every state, so the value stays legible on
   all six swatches. The previous inversion produced navy on navy. */
.wall__hex:hover,
.wall__hex:focus-visible,
.wall__hex.is-copied{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--white);
}

/* the wall builds column by column */
.wall__col{ transform:scaleY(0); transform-origin:bottom; }
.wall.is-in .wall__col{ transform:scaleY(1); transition:transform .7s var(--ease), flex-grow .46s var(--ease); }
.wall.is-in .wall__col:nth-child(1){ transition-delay:.05s, 0s; }
.wall.is-in .wall__col:nth-child(2){ transition-delay:.12s, 0s; }
.wall.is-in .wall__col:nth-child(3){ transition-delay:.19s, 0s; }
.wall.is-in .wall__col:nth-child(4){ transition-delay:.26s, 0s; }
.wall.is-in .wall__col:nth-child(5){ transition-delay:.33s, 0s; }
.wall.is-in .wall__col:nth-child(6){ transition-delay:.40s, 0s; }

.wall__hint{ margin-top:var(--s3); font-size:15px; color:var(--muted); }
.copied{
  position:fixed; z-index:130; left:50%; bottom:32px;
  transform:translate(-50%, 12px);
  padding:10px 22px;
  border-radius:var(--r-pill);
  background:var(--navy); color:var(--white);
  font-size:16px; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-mid), transform var(--t-mid);
}
.copied.is-on{ opacity:1; transform:translate(-50%, 0); }
.copied:empty{ display:none; }


/* ============================================================
   TEMPLATE GALLERY
   Two rows, and inside a row every container is the same height and
   starts and ends on the same line. Only the widths differ. Nothing is
   centred against a taller neighbour and nothing floats.

   The frame is a stage of a fixed height that the row sets, and the
   preview keeps its own proportion inside it: a slide stays landscape,
   a letterhead stays portrait. So the grid stays ordered while each
   asset still reads as itself.
   ============================================================ */
.gal{ display:grid; gap:var(--s6); }
.gal__row{
  display:grid; gap:var(--s6);
  align-items:stretch;
}
.gal__row--lead{ grid-template-columns:65fr 35fr; --stage:420px; }
.gal__row + .gal__row{ grid-template-columns:1fr 1fr; --stage:330px; }

.mk{ min-width:0; display:flex; flex-direction:column; }

/* The picture is the container. No frame around it, no inner surface and
   no padding: the image runs to the edges of the rounded box and the box
   is what the reader sees. The row still sets the height, so the grid is
   untouched, and object-fit does the rest. */
.mk__shot{
  position:relative; display:block;
  height:var(--stage);
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--navy-deep);
  box-shadow:0 24px 56px -22px rgba(0,10,30,.7);
  transition:box-shadow var(--t-mid);
}
.mk:hover .mk__shot{ box-shadow:0 34px 70px -22px rgba(0,10,30,.8); }

.mk__img{ position:absolute; inset:0; display:block; }
.mk__pic{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  transition:opacity .28s var(--ease), transform 1s var(--ease);
}
/* only the live language is painted, and both sit in the same box, so the
   swap cannot move anything */
.mk__pic.is-on{ opacity:1; }
.mk:hover .mk__pic.is-on{ transform:scale(1.03); }
.mk__shot.is-missing .mk__pic{ display:none; }
.mk__shot.is-missing{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px),
    var(--navy-deep);
}
/* a portrait sheet in a wider box loses its ends to the crop, so it is
   held to its head, where the mark and the opening line are */
.mk--letter .mk__pic{ object-position:center top; }

.mk__shot .ph{ z-index:2; inset:var(--s3); padding-block:var(--s4); }

/* the piece lifts as a whole. `translate` and not `transform`, because
   .reveal.is-in owns the transform of this element. */
.mk{ translate:0 0; transition:translate var(--t-mid); }
.mk:hover{ translate:0 -5px; }

.mk__body{ margin-top:var(--s4); display:flex; flex-direction:column; flex:1; }
.mk__title{
  color:var(--white); font-size:28px; font-weight:500; line-height:1.2;
  transition:color var(--t-mid);
}
.mk:hover .mk__title{ color:var(--gold); }
.mk__text{ margin-top:4px; color:var(--on-navy-2); font-size:17px; line-height:1.55; max-width:56ch; }
.mk__note{ margin-top:var(--s2); color:var(--on-navy-2); font-size:15px; line-height:1.5; max-width:56ch; }
.mk__foot{ margin-top:6px; color:var(--on-navy-2); font-size:14px; line-height:1.45; opacity:.85; }

/* One line: what it is, which language, and the action. Pinned to the foot
   of the card, so the action rows of two containers in the same grid row
   sit on the same line. */
.mk__dl{
  margin-top:auto; padding-top:var(--s4);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2) var(--s3);
}
.mk__dl-label{
  font-size:14px; font-weight:500; letter-spacing:.02em;
  color:var(--on-navy-2);
  transition:color var(--t-mid);
}
.mk:hover .mk__dl-label{ color:var(--white); }

/* the language switch: small, secondary, and it never changes size when
   the live side moves */
.seg{
  display:inline-flex; align-items:center;
  padding:3px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.seg__btn{
  padding:6px 14px;
  border-radius:var(--r-pill);
  font-size:14px; font-weight:500; line-height:1.3;
  color:var(--on-navy-2);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.seg__btn:hover{ color:var(--white); }
.seg__btn.is-on{ background:var(--white); color:var(--navy); font-weight:600; }
.seg__btn:focus-visible{ outline:3px solid var(--white); outline-offset:2px; }

/* The language is the button. The label comes first in the markup and the
   icon second, so in RTL the icon lands on the left of the text, which is
   where it is wanted in both languages. */
.dl__txt{ order:0; }
.dl__ico{ order:1; }
.mk .dl{ padding:8px 16px; font-size:14px; }
.mk:hover .dl--on-dark{ border-color:rgba(255,255,255,.9); }

/* the four pieces arrive as units, the showcase first */
.mk.reveal{ opacity:0; transform:translateY(40px); }
.mk.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .8s var(--ease), translate var(--t-mid);
}
.mk--deck.is-in  { transition-delay:0s, 0s, 0s; }
.mk--letter.is-in{ transition-delay:.14s, .14s, 0s; }
.mk--card.is-in  { transition-delay:.28s, .28s, 0s; }
.mk--zoom.is-in  { transition-delay:.38s, .38s, 0s; }
.mk__body > *{ opacity:0; transform:translateY(12px); }
.mk.is-in .mk__body > *{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease), transform .55s var(--ease);
}
.mk--deck.is-in .mk__body > *{ transition-delay:.24s; }
.mk--letter.is-in .mk__body > *{ transition-delay:.36s; }
.mk--card.is-in .mk__body > *{ transition-delay:.50s; }
.mk--zoom.is-in .mk__body > *{ transition-delay:.60s; }


/* ============================================================
   GUIDELINES ACCORDION
   Numbered editorial rows, not a FAQ list.
   ============================================================ */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__h{ margin:0; font-size:inherit; font-weight:inherit; color:inherit; }
.acc__btn{
  position:relative;
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:var(--s5);
  width:100%; text-align:right;
  padding:var(--s5) var(--s3);
  color:var(--navy);
  transition:padding var(--t-mid);
}
.acc__btn::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--sky);
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease);
  border-radius:var(--r-in);
}
.acc__btn > *{ position:relative; z-index:1; }
.acc__btn:hover::before{ transform:scaleX(1); }
.acc__btn:hover{ padding-right:var(--s5); }

.acc__name{ font-size:26px; font-weight:500; line-height:1.3; }
.acc__chev{ color:var(--navy); transition:transform var(--t-mid); }
.acc__btn[aria-expanded="true"] .acc__chev{ transform:rotate(180deg); }
/* A row whose content the spec document does not carry yet reads exactly
   like every other row: same colour, same weight, same chevron, nothing
   dimmed or greyed. It simply has nothing to open yet, so it is not a
   button and it grows no hover fill that would promise one. It becomes an
   accordion item again the moment the content arrives. */
.acc__item--empty .acc__btn--static{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:var(--s5);
  width:100%;
  padding:var(--s5) var(--s3);
  cursor:default;
  color:var(--navy);
}

.acc__wrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease);
}
.acc__item.is-open .acc__wrap{ grid-template-rows:1fr; }
.acc__body{ min-height:0; overflow:hidden; }
.acc__body > *{
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .45s var(--ease);
}
.acc__item.is-open .acc__body > *{ opacity:1; transform:none; transition-delay:.18s; }
.acc__body{ padding-inline:var(--s3); }
.acc__item.is-open .acc__body{ padding-bottom:var(--s6); }

.bul{ display:grid; gap:var(--s3); max-width:820px; }
.bul li{
  position:relative; padding-right:var(--s5);
  font-size:18px; line-height:1.65; color:var(--body);
}
.bul li::before{
  content:''; position:absolute; right:0; top:12px;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
}

/* the three formats the list names, drawn to scale */
.ratio{ display:flex; align-items:flex-end; gap:var(--s5); margin-top:var(--s6); }
.ratio li{ display:grid; justify-items:center; gap:var(--s2); }
.ratio__box{
  display:block; width:100px;
  border:1.5px solid var(--blue-mid);
  border-radius:6px;
  background:var(--sky);
}
.ratio__box--1x1{ height:100px; }
.ratio__box--4x5{ height:125px; }
.ratio__box--9x16{ width:79px; height:140px; }
.ratio__lbl{ font-size:15px; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; }
.acc__item.is-open .ratio__box{ animation:ratioIn .6s var(--ease) backwards; }
.acc__item.is-open .ratio li:nth-child(1) .ratio__box{ animation-delay:.24s; }
.acc__item.is-open .ratio li:nth-child(2) .ratio__box{ animation-delay:.34s; }
.acc__item.is-open .ratio li:nth-child(3) .ratio__box{ animation-delay:.44s; }
@keyframes ratioIn{ from{ transform:scaleY(.2); transform-origin:bottom; opacity:0; } }

/* a section of the spec document that carries no content yet */
.gap{
  padding:var(--s4) var(--s5);
  border:2px dashed var(--pale-3);
  border-radius:var(--r-in);
  color:var(--muted); font-size:16px;
}


/* ============================================================
   IDENTITY FINALE
   ============================================================ */
.sec--identity .sec__lead{ max-width:820px; }

.lam{
  position:relative;
  margin:88px 0 96px;
  min-height:560px;
  display:flex; align-items:center; justify-content:center;
}

/* assets/leave-a-mark.svg. Each of the three rows is clipped to its own
   band and its letters rise into it, which is the same build the type
   treatment had before the real artwork arrived. */
.lam__type{ position:relative; z-index:2; width:560px; max-width:100%; }
.lam__svg{ display:block; width:100%; height:auto; fill:var(--white); }
.lam__rise{ transform:translateY(var(--rise)); }
.lam.is-live .lam__rise{
  transform:none;
  transition:transform .95s var(--ease);
}
.lam.is-live .lam__rise--1{ transition-delay:.05s; }
.lam.is-live .lam__rise--2{ transition-delay:.20s; }
.lam.is-live .lam__rise--3{ transition-delay:.35s; }

/* assets/fingerprint.svg, sitting where the master lockup puts it: behind
   the type, starting just past the a. Its own gold, as supplied. */
/* Placed to the reference: the print sits over the right half of the
   lockup, rising above the top of "leave" and finishing inside "mark".
   Half the width of the type block, and its centre well above the centre
   of the type. Only position and scale, the drawing and its build are
   untouched. */
.lam__fp{
  position:absolute; z-index:1;
  left:calc(50% - 72px); top:50%;
  width:374px;
  transform:translateY(-66%);
  pointer-events:none;
}
/* The supplied artwork is 1072 filled ridge fragments and carries no
   strokes, so there is nothing to run stroke-dashoffset along. The build
   comes from the print's own geometry instead: the fragments are grouped
   into 34 rings by their distance from the core of the whorl, and the
   rings arrive one after another, so the ridges appear outward from the
   centre the way the print was laid down.

   Each ring is a transition and not a keyframe animation, so the class
   alone already describes the finished print and nothing can be left
   parked out of sight. */
/* One copy of the artwork serves both places, the toolbox tile reaching it
   through <use>. Blink does apply document CSS inside a use shadow tree,
   and it matches those selectors against where the <use> sits, so every
   rule that belongs to the finale is scoped to .lam__fp. Without that the
   tile would inherit the finale's gold and, worse, its hidden rings, and
   would sit empty until the reader reached the bottom of the page. */
.fp__art{ display:block; width:100%; height:auto; fill:currentColor; }
.lam__fp .fp__art{ fill:#D59F0F; }
.lam__fp .fp__ring{ opacity:0; }
.lam.is-drawn .fp__ring{
  opacity:1;
  transition:opacity .75s var(--ease);
  transition-delay:calc(var(--i) * 62ms);
}

.idc{ display:grid; grid-template-columns:6fr 6fr; gap:var(--s7) 72px; align-items:start; }
/* the only Leave a Mark heading on the page, and the two columns open on
   the same line: both headings share a size and a line height, so their
   first baselines land together */
.idc__kicker,.idc__h{ font-size:26px; font-weight:600; line-height:1.25; }
.idc__kicker{ color:var(--gold); letter-spacing:.02em; }
.idc__hook{
  margin-top:var(--s3);
  color:var(--white); font-size:34px; font-weight:500; line-height:1.28;
  letter-spacing:-.01em;
}
.idc__p{ margin-top:var(--s4); color:var(--on-navy-2); font-size:18px; line-height:1.7; }
.idc__blk + .idc__blk{ margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--on-navy-line); }
.idc__h{ color:var(--white); }
.idc__lead{ margin-top:var(--s3); color:var(--white); font-size:22px; font-weight:500; line-height:1.5; }


/* ============================================================
   HIGH CONTRAST
   base.css turns the shared shell black and white. These are the
   surfaces this page adds. The brand colours themselves stay:
   they are the subject of the page, not part of its interface.
   ============================================================ */
body.hc .sec--toolbox,
body.hc .sec--logo,
body.hc .sec--type,
body.hc .sec--color,
body.hc .sec--guide{ background:#000; }
body.hc .tool,
body.hc .mark__frame,
body.hc .spec__col,
body.hc .dl,
body.hc .gap{ background:#000; color:#fff; border:1px solid #fff; }
body.hc .tool::before,
body.hc .acc__btn::before{ display:none; }
body.hc .tool__title,body.hc .tool__sub,body.hc .tool__chev,body.hc .tool__art,
body.hc .stage__title,body.hc .stage__text,body.hc .sec__lead,body.hc .sub__title,
body.hc .acc__name,body.hc .acc__chev,body.hc .bul li,
body.hc .spec__row,body.hc .spec__use,body.hc .show__tab,body.hc .show__note,
body.hc .wall__hint,body.hc .mk__text,body.hc .mk__note,body.hc .mk__foot{ color:#fff; }
body.hc .dl .ico{ color:#fff; }
body.hc .acc,body.hc .acc__item,body.hc .spec__col:first-child{ border-color:#fff; }
body.hc .ratio__box{ background:#000; border-color:#fff; }
body.hc .lam__svg{ fill:#fff; }
body.hc .qnav__list{ background:#000; border:1px solid #fff; }
body.hc .qnav__item{ color:#fff; }
body.hc .prim__white{ box-shadow:inset 0 0 0 1px #000; }


/* ============================================================
   MOTION OFF, opt in through ?motion=off
   base.css covers the shared parts, these are this page only.
   ============================================================ */
body.motion-off .hero__cta,
body.motion-off .stage,
body.motion-off .lam__rise,
body.motion-off .mk,
body.motion-off .mk__body > *{ opacity:1 !important; transform:none !important; translate:0 !important; transition:none !important; }
body.motion-off .tool__ln,
body.motion-off .tool__rule,
body.motion-off .tool__slide{ stroke-dashoffset:0 !important; transition:none !important; }
body.motion-off .lam__fp .fp__ring{ opacity:1 !important; transition:none !important; }
body.motion-off .qnav{ transition:none !important; }
body.motion-off .tsw,
body.motion-off .tool__mark--navy,
body.motion-off .tool__art--aa span,
body.motion-off .prim__tag{ opacity:1 !important; transform:none !important; transition:none !important; }
body.motion-off .prim > *,
body.motion-off .wall__col{ transform:none !important; transition:none !important; }
body.motion-off .stage .mark{ opacity:1 !important; translate:0 !important; animation:none !important; }
body.motion-off .acc__wrap{ transition:none !important; }
body.motion-off .acc__body > *{ opacity:1 !important; transform:none !important; }
body.motion-off .ratio__box{ animation:none !important; }
body.motion-off .scroller__ico{ animation:none; }
body.motion-off .hero__media > .hero__layer > .hero__video{ transform:none !important; transition:none !important; }


/* ============================================================
   REDUCED MOTION
   Same policy as the rest of the site: entrances stay, they only
   get shorter. Each rule that also carries a hover response has
   to declare its whole transition list again here, or the
   response disappears for anyone with the setting on.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  body:not(.motion-forced) .mk.reveal.is-in{
    transition:opacity .6s var(--ease), transform .6s var(--ease), translate var(--t-mid);
  }
  body:not(.motion-forced) .hero__media > .hero__layer > img{ transform:none; }
  body:not(.motion-forced) .lam.is-drawn .fp__ring{ transition-duration:.55s; }
  body:not(.motion-forced) .lam.is-live .lam__rise{ transition-duration:.7s; }
}


/* ============================================================
   TABLET  768 - 1024
   ============================================================ */
@media (max-width:1024px){

  .hero{
    min-height:620px;
    padding-top:calc(var(--hdr-top) + var(--hdr-h) + 64px);
    padding-bottom:64px;
  }
  .hero__title{ font-size:60px; }
  .hero__lede{ font-size:18px; max-width:560px; }

  .sec--toolbox{ padding-block:72px 80px; }
  .sec--logo,.sec--type,.sec--color,.sec--guide{ padding-block:80px; }
  .sec--tpl{ padding-block:64px 72px; }
  .sec--identity{ padding-block:88px 96px; }
  .sec__lead{ font-size:18px; margin-bottom:var(--s6); }
  .sub__title{ font-size:22px; }

  .box{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s4); }
  .tool{ padding:var(--s4); gap:var(--s3); }
  .tool__art{ width:28px; height:28px; }
  .tool__title{ font-size:20px; }

  .show{ grid-template-columns:1fr; gap:var(--s6); }
  /* the index becomes a wrapped row of cards. The note keeps its place
     between the approved versions and the restricted ones by taking a
     full line of its own. */
  .show__nav{
    position:static;
    display:flex; flex-wrap:wrap; gap:var(--s2);
  }
  .show__tab{
    flex:1 1 220px;
    background:var(--white); border:1px solid var(--line);
    align-items:center;
  }
  .show__note{ flex:1 0 100%; margin:0; padding-top:var(--s3); border-top:1px solid var(--line); }
  .stage__title{ font-size:26px; }
  .marks{ gap:var(--s4); }

  .spec{ grid-template-columns:1fr; }
  .spec__col{ padding:var(--s5); }
  .spec__col:first-child{ border-left:0; border-bottom:1px solid var(--line); border-radius:var(--r-card); }
  .spec__name{ font-size:56px; }
  .spec__row--lg{ font-size:34px; }
  .spec__row--md{ font-size:22px; }

  .prim{ height:240px; }
  .wall{ height:360px; }
  .wall__name{ font-size:17px; }

  .gal{ gap:var(--s5); }
  .gal__row{ gap:var(--s5); }
  .gal__row--lead{ --stage:290px; }
  .gal__row + .gal__row{ --stage:250px; }
  .mk__title{ font-size:24px; }
  .mk__text,.mk__note{ max-width:none; }

  .acc__name{ font-size:22px; }

  .lam{ min-height:420px; margin:64px 0 72px; }
  .lam__type{ width:420px; }
  .lam__fp{ left:calc(50% - 54px); width:280px; }
  .idc{ grid-template-columns:1fr; gap:var(--s6); }
  .idc__hook{ font-size:28px; }
  .idc__kicker,.idc__h{ font-size:23px; }
  .prim{ height:320px; }
  .qnav__item{ padding:9px 14px; font-size:14px; }
}


/* ============================================================
   MOBILE  <= 767
   ============================================================ */
@media (max-width:767px){

  .hero{
    min-height:600px;
    padding-top:calc(var(--hdr-top) + var(--hdr-h) + var(--s6));
    padding-bottom:72px;
  }
  .hero__title{ font-size:50px; }
  .hero__lede{ font-size:16px; }
  .hero__cta .btn{ width:100%; justify-content:center; }
  /* The copy spans the full width and most of the height here, so the veil
     still has to carry it, only a little less than before. */
  .hero__veil{
    background:
      linear-gradient(to top,
        rgba(0,20,45,.72) 0%, rgba(0,20,45,.64) 56%,
        rgba(0,20,45,.44) 84%, rgba(0,20,45,.14) 100%);
  }
  /* A phone crops a 16:9 clip to a third of its width. Centred, that
     third lands on the empty paper and cuts off the hand and the mark
     being drawn, which are the subject. The focal point moves left to
     hold them. Still cover, still the clip's own proportion. */
  .hero__media > .hero__layer > .hero__video{ object-position:20% center; }
  .hero__media .ph{ padding-block:var(--s3); gap:2px; }

  .sec--toolbox{ padding-block:48px 56px; }
  .sec--logo,.sec--type,.sec--color,.sec--guide{ padding-block:56px; }
  .sec--tpl{ padding-block:48px 56px; }
  .sec--identity{ padding-block:64px 72px; }
  .sec__lead{ font-size:16px; line-height:1.6; margin-bottom:var(--s5); }
  .sub__title{ font-size:20px; margin-top:var(--s6); }

  /* the toolbox becomes one column of rows, still each with its
     own drawing, never a stack of squares */
  .box{ grid-template-columns:1fr; gap:var(--s2); }
  .tool{ padding:var(--s3) var(--s4); gap:var(--s3); border-radius:var(--r-in); }
  .tool__art{ width:26px; height:26px; }
  .tool__art--aa{ font-size:21px; }
  .tool__title{ font-size:20px; line-height:1.25; }
  .tool__sub{ font-size:15px; line-height:1.55; }
  .tool:hover{ transform:none; }

  .show__tab{ flex:1 1 44%; padding:var(--s3) var(--s3) var(--s3) var(--s2); }
  .show__name{ font-size:16px; }
  .stage__title{ font-size:28px; line-height:1.2; }
  .stage__text{ font-size:16px; line-height:1.6; }
  .marks{ grid-template-columns:1fr; gap:var(--s5); }
  .marks--single{ max-width:none; }

  .spec__name{ font-size:40px; }
  .spec__sizes{ margin-top:var(--s5); }
  .spec__row--lg{ font-size:28px; }
  .spec__row--md{ font-size:20px; }
  .spec__use{ font-size:16px; line-height:1.6; }
  .spec__act .btn{ width:100%; justify-content:center; }

  /* the ratio is easier to read stacked at this width */
  /* Each colour is a plane the copy sits inside, not a strip the copy is
     squeezed into. One padding for all four, and a floor under each height
     so the name never touches the top edge and the description never
     touches the bottom one. */
  .prim{ flex-direction:column; height:auto; }
  .prim > *{ transform-origin:top; align-items:flex-end; padding:var(--s5); }
  .prim__role{ font-size:14px; }
  .prim__blue{ min-height:200px; }
  .prim__gold{ min-height:150px; }
  .prim__black,.prim__white{ min-height:190px; }
  .prim__tag{ gap:5px; }
  .prim:hover .prim__gold,.prim:hover .prim__black,
  .prim:hover .prim__white,.prim:hover .prim__blue{ flex-grow:1; }
  .prim.is-in > *{ transform:scaleY(1); }
  .prim > *{ transform:scaleY(0); }

  /* the wall becomes rows, every colour open, nothing hidden
     behind a hover that a finger cannot perform */
  .wall{ flex-direction:column; height:auto; gap:2px; }
  .wall__col{
    flex:none;
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:var(--s4);
    padding:var(--s4);
    transform:scaleX(0); transform-origin:right;
  }
  .wall.is-in .wall__col{ transform:scaleX(1); }
  .wall__data{
    position:static; opacity:1; transform:none; pointer-events:auto;
    justify-items:end; transition:none;
  }
  /* flush with the left edge of the block, and on the same line on every
     row, rather than floating to wherever its own row happens to end */
  .wall__hex{ justify-self:end; }
  .wall__row{ font-size:14px; justify-content:flex-end; }
  .wall__k{ min-width:0; }
  .wall__hex{ margin-top:6px; }

  /* One column. With every container at full width there is no row to
     match a neighbour's height against, so each preview simply takes the
     proportion of what it holds and nothing is cropped away. */
  .gal__row,.gal__row--lead,.gal__row + .gal__row{
    grid-template-columns:1fr; gap:var(--s5);
  }
  .mk__shot{ height:auto; }
  .mk--deck .mk__shot,
  .mk--zoom .mk__shot{ aspect-ratio:16 / 9; }
  .mk--card .mk__shot{ aspect-ratio:3 / 2; }
  .mk--letter .mk__shot{ aspect-ratio:9 / 10.4; }
  /* the sheet is taller than the frame now, so it is held to its head,
     where the mark and the opening line are */
  .mk--letter .mk__pic{ object-position:center top; }
  .mk__dl{ padding-top:var(--s4); }
  .mk__title{ font-size:28px; line-height:1.2; }
  .mk__text{ font-size:16px; line-height:1.6; }
  .mk:hover{ translate:0 0; }
  .mk .dl{ padding:8px 15px; font-size:15px; }

  /* the bar spans the width it can and scrolls inside itself, so six
     destinations still fit on a phone */
  .qnav{ left:12px; right:12px; bottom:14px; transform:translateY(20px); max-width:none; }
  .qnav.is-on{ transform:translateY(0); }
  .qnav__list{ justify-content:flex-start; }
  .qnav__item{ padding:9px 14px; font-size:15px; }

  /* two columns, name then chevron. Three was left over from when the
     rows carried a number, and it parked the chevron against the word
     instead of on the edge, unlike every row below it. */
  .acc__btn{ grid-template-columns:1fr auto; gap:var(--s3); padding:var(--s4) var(--s2); }
  /* the rows with no content yet share the button's box exactly, so every
     chevron in the list lands on one vertical line */
  .acc__item--empty .acc__btn--static{ padding:var(--s4) var(--s2); }
  .acc__btn:hover{ padding-right:var(--s2); }
  .acc__name{ font-size:20px; line-height:1.25; }
  .acc__body{ padding-inline:var(--s2); }
  .bul li{ font-size:16px; line-height:1.6; padding-right:var(--s4); }
  .ratio{ gap:var(--s4); }
  .ratio__box{ width:74px; }
  .ratio__box--1x1{ height:74px; }
  .ratio__box--4x5{ height:93px; }
  .ratio__box--9x16{ width:58px; height:103px; }

  /* the finale keeps the lockup rather than breaking it apart: the
     type and the fingerprint stay one composition, only smaller */
  .lam{ min-height:300px; margin:48px 0 56px; }
  .lam__type{ width:250px; }
  .lam__fp{ left:calc(50% - 32px); width:167px; }
  .idc__kicker,.idc__h{ font-size:20px; line-height:1.25; }
  .idc__hook{ font-size:28px; line-height:1.2; }
  .idc__p{ font-size:16px; line-height:1.6; }
  .idc__lead{ font-size:17px; line-height:1.6; }
}