/* Lev Developments — blueprint lockup for the home hero.
   Scoped to .hh-logo-img only: inner-page .brand-logo renders at 40px tall,
   where these dimension annotations would be unreadable noise. The art is
   white-on-transparent, so it sits on whatever navy is behind it. */
.hh-logo-img{
  background-image:url("/assets/lev-logo-blueprint.webp");
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  height:clamp(46px,5vw,78px);
  width:clamp(154px,16.8vw,261px);
}

/* ---------------------------------------------------------------------------
   Masthead rule — a dashed drafting line under the logo and the nav.

   It reaches past the masthead's own box to finish level with the thin sheet
   frame drawn by .home-hero::before, so the three insets that separate the two
   have to be unwound: the masthead's padding, the hero's padding, less the
   frame's inset. Landing on the frame rather than near it is what stops it
   reading as an arbitrary margin.
   --------------------------------------------------------------------------- */
.hh-masthead::after{
  content:"";
  position:absolute;
  bottom:0;
  left:calc(-1 * (clamp(8px,1.5vw,26px) + clamp(22px,4vw,60px) - clamp(14px,1.6vw,26px)));
  right:calc(-1 * (clamp(8px,1.5vw,26px) + clamp(22px,4vw,60px) - clamp(14px,1.6vw,26px)));
  height:1px;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.55) 0 7px,
    rgba(255,255,255,0) 7px 16px);
  pointer-events:none;
}

/* A short drop tick where the rule meets the frame, turning the line from a
   divider into a datum the logo and the nav both hang off. Without it the two
   ends stop dead against the frame and the rule reads as a border. */
.hh-masthead::before{
  content:"";
  position:absolute;
  bottom:-5px;
  left:calc(-1 * (clamp(8px,1.5vw,26px) + clamp(22px,4vw,60px) - clamp(14px,1.6vw,26px)));
  width:1px;
  height:11px;
  background:rgba(255,255,255,.5);
  pointer-events:none;
}

/* ---------------------------------------------------------------------------
   Ambient drafting guide.

   One line, drawn slowly across the lower third and then let go. The cycle is
   long enough (26s) that it reads as something happening on a drawing board
   rather than a background animation, and the peak opacity is low enough that
   it is easy to miss entirely — which is the intent.
   --------------------------------------------------------------------------- */
.hh-datum{
  position:absolute;
  left:0;
  bottom:22%;
  height:1px;
  width:min(46vw,620px);
  transform-origin:left center;
  transform:scaleX(0);
  opacity:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.5) 12%,
    rgba(255,255,255,.5) 88%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:1;
  animation:hh-draw 26s ease-in-out infinite;
}
/* A tick riding the leading edge, so the line reads as being drawn rather than
   wiped in. */
.hh-datum::after{
  content:"";
  position:absolute;
  right:0;
  top:-4px;
  width:1px;
  height:9px;
  background:rgba(255,255,255,.55);
}
@keyframes hh-draw{
  0%      {transform:scaleX(0);opacity:0}
  6%      {opacity:.5}
  26%     {transform:scaleX(1);opacity:.5}
  44%     {transform:scaleX(1);opacity:.5}
  60%     {transform:scaleX(1);opacity:0}
  60.01%,100%{transform:scaleX(0);opacity:0}
}

/* ---------------------------------------------------------------------------
   The one annotation in the open middle: upright text on a dimension line.

   Not rotated text. writing-mode turned the label on its side AND swapped the
   flex axes with it, which put the rule beside the words instead of under
   them — it read as an artifact rather than an annotation.
   --------------------------------------------------------------------------- */
.hh-annot{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--sans);
  font-size:clamp(.6rem,.74vw,.72rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  pointer-events:none;
  z-index:1;
  white-space:nowrap;
}
.hh-annot i{font-style:normal;font-size:1.25em;color:rgba(255,255,255,.72);letter-spacing:.1em}

/* The dimension line runs the full height behind the label, with the words
   sitting in a gap in the middle. Two rules rather than one, so the text has
   air around it without needing a background plate. */
.hh-annot::before,
.hh-annot::after{
  content:"";
  width:1px;
  flex:1;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.26));
}
.hh-annot::after{background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,0))}

/* Crosshairs at each end of the dimension line, matching the sheet's crop
   marks so the two read as the same drawing system. */
.hh-annot-tick{
  position:absolute;
  left:50%;
  width:13px;
  height:13px;
  transform:translateX(-50%);
  background:
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) 50% 0/1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) 0 50%/100% 1px no-repeat;
}
.hh-annot-tick.top{top:clamp(40px,7vh,80px)}
.hh-annot-tick.bot{bottom:clamp(40px,7vh,80px)}

/* ---------------------------------------------------------------------------
   Scroll cue. Sits on the hero's bottom edge with a rule running out either
   side, so it reads as a note on the drawing rather than a floating button.
   --------------------------------------------------------------------------- */
.hh-scroll{
  position:absolute;
  left:50%;
  bottom:clamp(18px,3vh,34px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--sans);
  font-size:clamp(.54rem,.66vw,.62rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  text-decoration:none;
  z-index:4;
  white-space:nowrap;
}
.hh-scroll::before,
.hh-scroll::after{
  content:"";
  width:clamp(40px,7vw,110px);
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3));
}
.hh-scroll::after{background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,0))}
.hh-scroll svg{width:11px;height:16px;opacity:.7;animation:hh-nudge 3.4s ease-in-out infinite}
.hh-scroll:hover{color:rgba(255,255,255,.75)}
@keyframes hh-nudge{
  0%,72%,100%{transform:translateY(0)}
  84%{transform:translateY(4px)}
}
@media (prefers-reduced-motion:reduce){
  .hh-scroll svg{animation:none}
}

@media (prefers-reduced-motion:reduce){
  /* The guide is the only ambient motion on the page; stopping it leaves the
     hero completely still rather than merely slower. */
  .hh-datum{animation:none;display:none}
}

/* ---------------------------------------------------------------------------
   Hero typography and the primary CTA.

   These live here rather than in styles.css because every one of them is
   hero-only — .cta-box appears on no other page. This file loads after
   styles.css, so the two .hh-lead / .cta-box overrides below win on the
   cascade without !important, and a 39KB shared stylesheet stays untouched.
   --------------------------------------------------------------------------- */

/* Sits above the headline and says what the company is in one line. Small
   enough that the eye still reaches the headline first — the rule to its left
   does the locating, so the words themselves can stay quiet. */
.hh-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--sans);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:clamp(.56rem,.72vw,.66rem);
  color:rgba(206,224,255,.62);
  margin:0 0 clamp(20px,2.4vh,30px);
}
.hh-eyebrow::before{
  content:"";
  width:clamp(20px,3vw,40px);
  height:1px;
  background:var(--line);
  flex:none;
}
.hh-eyebrow i{font-style:normal;color:rgba(206,224,255,.34)}

/* Lifts the headline off the grid so it sits above the drawing rather than on
   it. Three shadows doing three jobs:

   A tight, nearly-opaque one for contact — this is what separates the letter
   edges from the grid lines running behind them, and it is the reason the type
   stops looking printed onto the background.

   A mid one for the drop, offset further down.

   A wide, faint one for ambient occlusion, no offset — the darkening a raised
   object casts all round itself.

   All three are the page's own navy rather than black. Black would grey the
   blue and read as a bevel effect; the background colour reads as depth. */
.hh-title{
  text-shadow:
    0 1px 2px rgba(1,15,40,.55),
    0 6px 16px rgba(1,15,40,.45),
    0 0 42px rgba(1,15,40,.5);
  margin:0 0 clamp(26px,3.4vh,42px);
}

/* ---------------------------------------------------------------------------
   Vertical rhythm.

   The steps between these elements were fixed pixels set against a headline
   that scales with the viewport, so on a tall screen the block bunched at the
   top and on a short one it crowded. Each gap is now a clamp on vh with the
   old value as its floor: nothing gets tighter than it was, and the column
   opens up as there is room for it.

   The gaps also step in size deliberately — rule to copy is the smallest,
   copy to action larger, action to the process note largest — so the block
   reads as three groups rather than five evenly spaced lines.
   --------------------------------------------------------------------------- */
.hh-rule{margin:0 0 clamp(26px,3vh,36px)}

/* Stepped back from the headline. It was set at .19em tracking on a 2.0
   line-height — generous enough that it read as a second headline rather than
   as supporting copy. Smaller, tighter, and a blue-white instead of plain
   white so the headline keeps the only pure white in the block. */
.hh-lead{
  letter-spacing:.15em;
  font-size:clamp(.71rem,.92vw,.83rem);
  line-height:1.9;
  color:rgba(219,231,252,.66);
  margin:0 0 clamp(34px,4.6vh,56px);
}

/* An annotation on the drawing, not a strapline: below the body copy in size,
   with the separators dimmer than the words so it scans as one line rather
   than as four items. Deliberately not badges or icons. */
.hh-process{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:clamp(.5rem,.64vw,.58rem);
  color:rgba(206,224,255,.4);
  margin:clamp(26px,5vh,58px) 0 0;
}
.hh-process i{font-style:normal;color:rgba(206,224,255,.22);padding:0 2px}

/* The primary call to action. Still a drawn rectangle rather than a filled
   marketing button — the added weight comes from a brighter border, a lit top
   edge and a faint plate behind the label, never from colour. */
.cta-box{
  position:relative;
  border-color:var(--white-55);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:background-color .25s ease,border-color .25s ease,
             box-shadow .25s ease,transform .2s ease;
}
.cta-box:hover,
.cta-box:focus-visible{
  background:rgba(255,255,255,.11);
  border-color:var(--white);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 0 1px rgba(255,255,255,.06),
    0 6px 20px rgba(1,15,40,.4),
    0 0 18px rgba(255,255,255,.09);
}
.cta-box:active{transform:translateY(0)}
.cta-box svg{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.cta-box:hover svg,
.cta-box:focus-visible svg{transform:translateX(5px)}

/* Corner brackets, sitting just outside the box. Drawn with two gradients per
   corner on one pseudo-element per side, so the whole treatment costs no extra
   markup and scales with the button. */
.cta-box::before,
.cta-box::after{
  content:"";
  position:absolute;
  left:-5px;
  right:-5px;
  height:9px;
  pointer-events:none;
  background-image:
    linear-gradient(var(--white-55),var(--white-55)),
    linear-gradient(var(--white-55),var(--white-55)),
    linear-gradient(var(--white-55),var(--white-55)),
    linear-gradient(var(--white-55),var(--white-55));
  background-size:9px 1px,1px 9px,9px 1px,1px 9px;
  background-repeat:no-repeat;
  transition:opacity .25s ease;
  opacity:.55;
}
.cta-box::before{
  top:-5px;
  background-position:left top,left top,right top,right top;
}
.cta-box::after{
  bottom:-5px;
  background-position:left bottom,left bottom,right bottom,right bottom;
}
.cta-box:hover::before,
.cta-box:hover::after,
.cta-box:focus-visible::before,
.cta-box:focus-visible::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cta-box,.cta-box svg{transition:none}
  .cta-box:hover{transform:none}
  .cta-box:hover svg{transform:none}
}

@media (max-width:520px){
  /* At this width the eyebrow wraps and its rule strands on the first line.
     Drop the rule and let the words carry it. */
  .hh-eyebrow{letter-spacing:.24em}
  .hh-eyebrow::before{display:none}
  .hh-process{letter-spacing:.2em}
}

/* ---------------------------------------------------------------------------
   Hero callouts — a hole cut in the blueprint with cream paper behind it.

   The board is a closed drawing sheet sitting inside the hero frame. The
   negative margin cancels the two paddings that inset this column (.home-hero
   has clamp(22px,4vw,60px), .hh-body adds clamp(10px,2vw,40px)) and then puts
   the right edge back so the outer glow comes to rest exactly on the frame
   line drawn by .home-hero::before — landing on it rather than near it is what
   stops the inset reading as arbitrary.

   --sheet-w is the span from the outer glow line to the right edge of the
   screen. main.js measures it from the first masthead nav link so the glow
   lines up under "HOME"; the 740px here is only the pre-JS fallback. The nav is
   content-width — it depends on how wide seven link labels happen to render —
   so there is no pure-CSS way to tie the two together.

   Measuring in CSS pixels also keeps the old zoom behaviour: zooming shrinks
   the viewport in CSS px, so the sheet shrinks with it rather than holding a
   constant physical size the way a pure grid fr column did.
   --------------------------------------------------------------------------- */
.hh-callouts{
  --sheet-w:740px;
  --line-out:clamp(8px,1.2vw,14px);   /* inner hairline offset */
  --glow-out:clamp(17px,2.6vw,30px);  /* outer neon line offset */
  /* Where the outer glow comes to rest on the right: the same inset as the
     hero's own sheet frame, so the board finishes on that line rather than
     near it. */
  --edge:clamp(14px,1.6vw,26px);

  /* The board is closed on all four sides and sits inside the frame.
     --sheet-w is the span from the nav's left edge to the right of the screen;
     the glow occupies that span less the right inset, and the paper itself is
     that again less the glow's offset on both sides. */
  width:calc(var(--sheet-w) - var(--edge) - (2 * var(--glow-out)));
  max-width:none;
  justify-self:end;
  /* Cancels the two paddings that inset this column, then puts the right edge
     back where the glow lands on the frame line. */
  margin-right:calc(
    (var(--edge) + var(--glow-out))
    - (clamp(22px,4vw,60px) + clamp(10px,2vw,40px))
  );
  position:relative;
  border-radius:clamp(16px,2.2vw,30px);
  /* Margin on the sheet, generous enough that the crop marks and inner rule
     have room to sit inside it without crowding the drawings. */
  padding:clamp(22px,3vw,42px) clamp(24px,3vw,46px);
  /* The three drawings are separated by a rule now, so the gap only has to
     give that rule air on both sides. */
  gap:clamp(10px,1.6vw,24px);

  /* Paper, not a card. Three things separate the two:

     A noise layer at 3.5% — enough to break the flat fill under a raking eye,
     not enough to read as texture. It sits above the fill and below the
     drawings, so the ink stays crisp.

     An inset top shadow, so the sheet looks like it is lying ON the drafting
     surface rather than hovering over it. A card gets an even ring; a sheet
     catches light at the top edge and darkens where it meets the board.

     A layered drop shadow instead of the single soft one: a tight, dark
     contact shadow doing the seating, and a wide diffuse one doing the room.
     One blurred shadow at 60px is what makes a SaaS card float. */
  background-color:#f4f8ff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-repeat:repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 14px 22px -18px rgba(4,38,92,.34),
    inset 0 -10px 18px -16px rgba(4,38,92,.2),
    0 2px 4px rgba(1,15,40,.3),
    0 30px 70px rgba(1,15,40,.42);
}

/* ---------------------------------------------------------------------------
   Sheet furniture: a secondary offset line just inside the paper, and the
   corner registration marks.

   A separate element because .hh-callouts' own ::before and ::after are
   already spent on the two outer hairlines.
   --------------------------------------------------------------------------- */
.hh-sheet-fx{
  --mark:rgba(4,38,92,.4);
  position:absolute;
  inset:clamp(16px,2vw,30px);
  border:1px solid rgba(4,38,92,.16);
  border-radius:clamp(6px,1vw,12px);
  pointer-events:none;
}

/* Crop marks at all four corners. Each pseudo-element is a full-width strip
   carrying two crosshairs — one at each end — built from four gradients: a
   horizontal and a vertical bar sharing a position, which is what makes the
   cross. Two strips, four marks, no extra elements. */
.hh-sheet-fx::before,
.hh-sheet-fx::after{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(8px,1vw,14px));
  right:calc(-1 * clamp(8px,1vw,14px));
  height:13px;
  background-image:
    linear-gradient(var(--mark),var(--mark)),
    linear-gradient(var(--mark),var(--mark)),
    linear-gradient(var(--mark),var(--mark)),
    linear-gradient(var(--mark),var(--mark));
  background-size:13px 1px,1px 13px,13px 1px,1px 13px;
  background-position:left center,left center,right center,right center;
  background-repeat:no-repeat;
}
.hh-sheet-fx::before{top:calc(-1 * clamp(8px,1vw,14px))}
.hh-sheet-fx::after{bottom:calc(-1 * clamp(8px,1vw,14px))}

/* ---------------------------------------------------------------------------
   The three drawings are the project-category navigation.

   The hover lives inside the drawing rather than on a card around it: the ink
   thickens, a hairline draws itself underneath, and the caption fades up. No
   box appears, nothing moves position, and the sheet never lifts.
   --------------------------------------------------------------------------- */
.hh-house{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  padding-bottom:clamp(14px,1.8vw,22px);
  /* Composed with the ink filter on .art below rather than replacing it, so
     the long recolour chain is never duplicated. */
  transition:filter .32s ease;
}
.hh-house:hover,
.hh-house:focus-visible{
  filter:contrast(1.09) drop-shadow(0 0 9px rgba(4,38,92,.16));
}
.hh-house:focus-visible{outline:none}

/* The drafting underline. Grows from the left like a line being drawn. */
.hh-house::after{
  content:"";
  position:absolute;
  left:0;
  right:clamp(20px,2.6vw,40px);
  bottom:clamp(6px,0.9vw,11px);
  height:1px;
  background:rgba(4,38,92,.45);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.hh-house:hover::after,
.hh-house:focus-visible::after{transform:scaleX(1)}

/* Standing, not revealed. On the drawing sheet these read as the caption each
   elevation would carry anyway, so hiding them until hover would be hiding the
   navigation itself — and would leave touch users with no sign the drawings go
   anywhere. Hover still does something: the ink thickens and the rule draws. */
.hh-house-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:clamp(6px,1vw,12px);
  font-family:var(--sans);
  font-size:clamp(.6rem,.72vw,.7rem);
  letter-spacing:.04em;
  color:rgba(4,38,92,.78);
  border-bottom:1px solid rgba(4,38,92,.28);
  padding-bottom:3px;
  transition:color .25s ease,border-color .25s ease;
}
.hh-house-cta::after{
  content:"\2192";
  font-size:.9em;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.hh-house:hover .hh-house-cta,
.hh-house:focus-visible .hh-house-cta{
  color:rgba(4,38,92,1);
  border-color:rgba(4,38,92,.6);
}
.hh-house:hover .hh-house-cta::after,
.hh-house:focus-visible .hh-house-cta::after{transform:translateX(4px)}

/* A hairline between drawings, so the three read as sheets on one board rather
   than as one continuous image. */
.hh-house + .hh-house{
  border-top:1px solid rgba(4,38,92,.12);
  padding-top:clamp(12px,1.8vw,22px);
}

@media (prefers-reduced-motion:reduce){
  .hh-house,.hh-house::after,.hh-house-cta,.hh-house-cta::after{transition:none}
  .hh-house::after{transform:scaleX(1);opacity:0}
  .hh-house:hover::after,.hh-house:focus-visible::after{opacity:1}
}

/* The inner hairline. Pseudo-elements rather than outline-offset so the corner
   radius stays under our control and remains concentric at every size. */
.hh-callouts::before{
  content:"";
  position:absolute;
  inset:calc(-1 * var(--line-out));
  border:1px solid rgba(255,255,255,.45);
  border-radius:clamp(24px,3vw,42px);
  pointer-events:none;
}

/* A third line further out, lit like neon tube, closed on all four sides. Its
   left edge is the one aligned to the nav, which is why --glow-out is taken
   off the sheet's width twice above — once for each side.

   The glow now reads as the edge of the drawing board itself, so it carries
   the full box-shadow on every side rather than being cut off-screen. */
.hh-callouts::after{
  content:"";
  position:absolute;
  inset:calc(-1 * var(--glow-out));
  border:1px solid rgba(255,255,255,.85);
  border-radius:clamp(32px,3.8vw,54px);
  box-shadow:
    0 0 5px rgba(255,255,255,.5),
    0 0 14px rgba(255,255,255,.3),
    0 0 30px rgba(255,255,255,.15),
    inset 0 0 6px rgba(255,255,255,.28);
  pointer-events:none;
}

/* ---------------------------------------------------------------------------
   Ink colour. The three PNGs are ~86% fully transparent with the linework drawn
   in near-white (#f5f8ff) — built to sit on navy. On cream paper that would be
   invisible, so the ink is recoloured to the brand navy.

   filter rather than re-encoding the images: they're embedded as base64 in
   art.css, and a filter keeps the antialiasing intact and is trivially
   reversible. brightness(0) flattens the ink to black while leaving alpha
   alone; the rest lands it on #04265c exactly.
   --------------------------------------------------------------------------- */
.art{
  filter:brightness(0) saturate(100%) invert(50%) sepia(19%) saturate(291%)
         hue-rotate(178deg) brightness(79%) contrast(391%);
}

@media (max-width:900px){
  /* Single column below 900px. The board is closed on all four sides at every
     size, so here it simply fills the column with the same inset either side
     and the corners stay uniform. main.js stops feeding --sheet-w down here. */
  .hh-callouts{
    width:auto;
    justify-self:stretch;
    margin-right:0;
    --line-out:7px;
    --glow-out:14px;
  }
  .hh-callouts::before{border-radius:20px}
  .hh-callouts::after{border-radius:26px}

  /* The annotation lives in the gap between the two columns, and in one column
     there is no gap. It is decorative, so it goes rather than being squeezed
     somewhere it doesn't belong. */
  .hh-annot{display:none}

  .hh-scroll{display:none}
  .hh-datum{bottom:14%;width:min(70vw,420px)}
  .hh-sheet-fx{inset:11px;border-radius:8px}
  .hh-sheet-fx::before,.hh-sheet-fx::after{left:-7px;right:-7px;height:11px;
    background-size:11px 1px,1px 11px,11px 1px,1px 11px}
  .hh-sheet-fx::before{top:-7px}
  .hh-sheet-fx::after{bottom:-7px}
}

/* The drawing underline is the one thing hover adds that a touch device can
   never see; the caption itself is always present, so nothing is lost. */
@media (hover:none){
  .hh-house::after{display:none}
}