/* ============================================================================
   Guava Web Services — house system
   Design system: DESIGN.md (binding). Tokens below mirror its frontmatter.

   TYPOGRAPHY CONTRACT — Instrument Sans for display and body, Spline Sans Mono
   for uppercase kickers, step numbers, readouts and controls only. Never Inter,
   Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Karla, system-ui,
   DM Sans, Manrope, Space Grotesk, Plus Jakarta Sans, Satoshi, General Sans,
   Outfit or Sora as a primary family. Never above font-weight 500. Tracking is
   size-specific. No pure #000 or #fff. No gradients as decoration. No
   border-radius except .plate — every other corner is a clip-path staircase.
   ========================================================================== */

:root{
  /* palette — every value is a token in DESIGN.md frontmatter */
  --ground:#0F1310;
  --ground-lift:#171C17;
  --ground-raised:#1E241D;
  --bone:#EFEFE6;
  --bone-2:#A8AEA2;
  --bone-3:#838B7D;
  --bone-press:#CFD3C8;
  --hairline:#2A312A;
  --hairline-soft:#202620;

  /* the field ramp, cold to hot. Read by the canvas engines at boot. */
  --field-0:#2A6B54;
  --field-1:#3FBF86;
  --field-2:#F0B429;
  --field-3:#FF7A4D;
  --field-4:#FF4D8D;
  --accent:#3FBF86;

  /* channel triples so hairlines and scrims can be alpha without a second hex */
  --bone-rgb:239 239 230;
  --ground-rgb:15 19 16;

  /* geometry — every distance is a whole number of cells */
  --cell:14px;
  --gutter:56px;   /* 4 cells */
  --maxw:1176px;   /* 84 cells */
  --readw:34ch;
  --line:rgb(var(--bone-rgb) / .10);
  --line-2:rgb(var(--bone-rgb) / .05);

  --notch-sm:6px;
  --notch-md:8px;
  --notch-lg:10px;
  --plate:24px;

  --grot:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Spline Sans Mono",SFMono-Regular,ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

@media (max-width:680px){ :root{ --gutter:28px; } }   /* 2 cells */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; overflow-x:clip; }

body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.05px;
  overflow-x:clip;   /* not `hidden`: that creates a scroll container and breaks sticky */
  -webkit-font-smoothing:antialiased;
}

/* The lattice. The one piece of pure decoration, and it earns its keep by
   making every alignment decision on the page visible. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(0deg,  var(--line-2) 0 1px, transparent 1px var(--cell));
}

a{ color:inherit; }
figure{ margin:0; }          /* UA margin on a layout primitive */
img,canvas,svg{ display:block; max-width:100%; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ---------- type roles ---------- */
.label-mono{
  font-family:"Spline Sans Mono",SFMono-Regular,ui-monospace,Menlo,monospace;
  font-size:11px; font-weight:500; line-height:1.35;
  letter-spacing:1.8px; text-transform:uppercase;
}
.micro-mono{
  font-family:"Spline Sans Mono",SFMono-Regular,ui-monospace,Menlo,monospace;
  font-size:10px; font-weight:400; line-height:1.45;
  letter-spacing:1.15px; text-transform:uppercase;
}
.body-sm{ font-size:13px; line-height:1.5; letter-spacing:.1px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* ============================================================================
   the field
   ========================================================================== */
#field{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;   /* never eats a click */
}

.pxctl{
  position:fixed; left:16px; bottom:16px; z-index:20;
  display:flex; align-items:center; gap:5px;
  padding:7px 9px;
  background:rgb(var(--ground-rgb) / .82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 2px 14px rgb(var(--ground-rgb) / .4);
  font-family:"Spline Sans Mono",SFMono-Regular,ui-monospace,Menlo,monospace;
  font-size:10px; font-weight:400;
  letter-spacing:1.15px; text-transform:uppercase;
  transition:opacity .35s ease, transform .35s ease;
  clip-path:polygon(
    6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px,
    calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px),
    calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px),
    0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
}
.pxctl[hidden]{ display:none; }
.pxctl.hide{ opacity:0; transform:translateY(8px); pointer-events:none; }
.pxctl .lbl{ color:var(--bone-3); margin:0 3px; }
.pxctl .lbl:first-child{ margin-left:0; }
.pxctl button{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  width:22px; height:22px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); background:var(--ground-lift); color:var(--bone);
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
  clip-path:polygon(
    4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px,
    calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%,
    4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px),
    0 calc(100% - 4px), 0 4px, 2px 4px, 2px 2px, 4px 2px);
}
.pxctl button:hover{ border-color:var(--bone-3); }
.pxctl button.on{ background:var(--bone); color:var(--ground); border-color:var(--bone); }

/* ============================================================================
   masthead
   ========================================================================== */
.masthead{
  position:relative; z-index:4;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start;
  gap:24px; padding:var(--cell) var(--gutter);
}
.masthead p{ margin:0; color:var(--bone-2); }
.mh-l{ justify-self:start; }
.mh-r{ justify-self:end; text-align:right; }
.mh-c{ justify-self:center; color:var(--bone); }
.mark{ width:28px; height:auto; }
/* The mark is the field's material at wordmark scale: the ramp running cold to
   hot across the diagonal. Classes, not hex attributes, so the tokens stay the
   single source, and the group's currentColor is the fallback if these ever
   fail to apply.

   It runs field-1 to field-4 and deliberately skips field-0. That band is tuned
   to recede into the ground, which is right in a field and exactly wrong in a
   logo, where every cell has to hold the letterform at 28px. A ramp built for
   atmosphere is not automatically a ramp for a mark. */
.mark .b0{ fill:var(--field-0); }
.mark .b1{ fill:var(--field-1); }
.mark .b2{ fill:var(--field-2); }
.mark .b3{ fill:var(--field-3); }
.mark .b4{ fill:var(--field-4); }

@media (max-width:680px){
  .masthead{ grid-template-columns:1fr 1fr; row-gap:var(--cell); }
  .mh-c{ order:-1; grid-column:1 / -1; }
}

/* ============================================================================
   hero
   ========================================================================== */
.hero{ position:relative; z-index:1; min-height:88vh; display:flex; flex-direction:column; }

/* The headline sits on the ground colour so the field reads as being *behind*
   the page rather than painted over the type. */
.hhead{ position:relative; z-index:5; background:var(--ground); padding:0 var(--gutter); }
.hhead::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--line);
}
.hgrid{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--cell)*2) 0 calc(var(--cell)*3);
  display:grid; grid-template-columns:1fr; gap:calc(var(--cell)*2); align-items:end;
}
/* The headline takes the whole measure. Sharing the row with the column below
   forces the second line to wrap and breaks the two-beat read. */
@media (min-width:900px){
  .hgrid{ grid-template-columns:1fr auto; }
  .hl{ grid-column:1 / -1; }
  .hcol{ grid-column:2; justify-self:end; }
}

.hl{
  margin:0; font-weight:500; text-transform:uppercase;
  font-size:clamp(30px,6.0vw,78px); line-height:.94; letter-spacing:-.034em;
}
.hcol{ align-self:end; max-width:40ch; }
.hdesc{
  margin:0 0 var(--cell); font-size:clamp(15px,1.35vw,19px);
  line-height:1.45; letter-spacing:-.15px; color:var(--bone-2); max-width:38ch;
}
/* Stepped line reveal — quantised, because a smooth ease would be the one
   motion on the page that is not on the grid. */
.ln{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.ln > span{ display:block; }

.hhint{ margin:auto 0 var(--cell); padding:0 var(--gutter); color:var(--bone-3); }
@media (max-width:680px){ .hhint{ display:none; } }

/* ============================================================================
   intro statement
   ========================================================================== */
.intro{ position:relative; z-index:2; padding:calc(var(--cell)*6) 0 calc(var(--cell)*9); }
.statement{
  margin:0 0 calc(var(--cell)*3); max-width:34ch;
  font-size:clamp(27px,5vw,76px); font-weight:500;
  line-height:.98; letter-spacing:-.035em;
}
/* The positioning block: a claim, the explanation, then the one-line summary.
   Kept as a vertical stack rather than the two-column .ed shape, so the first
   thing after the hero still reads as a statement and not as a third article. */
.intro-body{ max-width:var(--readw); }
.intro-body p{
  margin:0 0 var(--cell);
  font-size:clamp(16px,1.35vw,19px); line-height:1.6; letter-spacing:-.15px;
  color:var(--bone-2);
}
.intro-lead{
  margin:calc(var(--cell)*2) 0 0;
  font-size:clamp(19px,1.9vw,27px); font-weight:500;
  line-height:1.3; letter-spacing:-.55px; color:var(--bone);
}

/* ============================================================================
   card grids
   These were horizontal scrollers, then pinned horizontal scrollers. Both put
   work off the right edge and asked the reader to find it, which is a bad bet
   with an audience that did not ask for a filmstrip. Everything is on screen
   in one vertical pass now, and the page is shorter for it.
   ========================================================================== */
.caro{ position:relative; z-index:2; padding:0 0 calc(var(--cell)*9); }
.caro .ch{ padding-bottom:calc(var(--cell)*3); }
.caro .ch h2{
  margin:0; max-width:18ch;
  font-size:clamp(30px,4.5vw,46px); font-weight:500;
  line-height:1.04; letter-spacing:-1.4px; color:var(--bone);
}

.cards{
  display:grid; grid-template-columns:1fr;
  gap:calc(var(--cell)*4) calc(var(--cell)*2);
}
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{ display:flex; flex-direction:column; min-width:0; }

/* The one true radius: a plate is a window cut through to a different
   material, so it gets a different corner. */
.plate{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--ground-lift); border:1px solid var(--hairline);
  border-radius:var(--plate);
}
.plate canvas{ width:100%; height:100%; }

.card .t{
  margin:var(--cell) 0 7px;
  font-size:23px; font-weight:500; line-height:1.2; letter-spacing:-.45px;
}
.card .d{
  margin:0; font-size:15px; line-height:1.55; letter-spacing:-.05px;
  color:var(--bone-2);
}
.card .price{
  margin:auto 0 0; padding-top:var(--cell);
  color:var(--bone-3);
}

/* ============================================================================
   editorial
   ========================================================================== */
.ed{ position:relative; z-index:2; padding:calc(var(--cell)*6) 0 calc(var(--cell)*9); }
.ed .wrap{ display:grid; grid-template-columns:1fr; gap:calc(var(--cell)*2); }
@media (min-width:900px){
  .ed .wrap{ grid-template-columns:1fr 1.15fr; gap:calc(var(--cell)*4); align-items:start; }
}
.ed h2{
  margin:0; font-size:clamp(30px,4.5vw,46px); font-weight:500;
  line-height:1.04; letter-spacing:-1.4px; max-width:16ch;
}
.ed .kick{ margin:var(--cell) 0 0; color:var(--bone-3); }
.ed .body p{
  margin:0 0 var(--cell); max-width:var(--readw);
  font-size:clamp(16px,1.35vw,19px); line-height:1.6; letter-spacing:-.15px;
  color:var(--bone-2);
}
.ed .body p:last-child{ margin-bottom:0; }
.ed .body b{ font-weight:500; color:var(--bone); }

/* ============================================================================
   diagrams
   ========================================================================== */
.proc{ position:relative; z-index:2; padding:0 0 calc(var(--cell)*9); }
.proc.parts{ padding-top:0; }
.proc .ph{ margin-bottom:calc(var(--cell)*3); }
.proc .ph h2{
  margin:0; font-size:clamp(30px,4.5vw,46px); font-weight:500;
  line-height:1.04; letter-spacing:-1.4px; max-width:18ch;
}
.proc .ph .kick{ margin:var(--cell) 0 0; color:var(--bone-3); }

.procflow{ width:100%; aspect-ratio:3/1; margin-bottom:calc(var(--cell)*2); }
/* 3:1 leaves a diagram about 106px tall on a phone, which is not enough room
   for the strands to read as strands. Give it back some height. */
@media (max-width:680px){ .procflow{ aspect-ratio:2/1; } }
.procflow canvas{ width:100%; height:100%; }

.steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--cell)*2) var(--cell); }
@media (min-width:840px){ .steps{ grid-template-columns:repeat(4,1fr); } }

.step{ position:relative; display:flex; flex-direction:column; gap:7px; padding-bottom:17px; }
.step .dl{ display:flex; align-items:center; gap:9px; }
.step h3{ margin:0; font-size:20px; font-weight:500; line-height:1.2; letter-spacing:-.4px; }
.step p{ margin:0; font-size:15px; line-height:1.55; letter-spacing:-.05px; color:var(--bone-2); }
.step .badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 6px; background:var(--bone); color:var(--ground);
  clip-path:polygon(
    4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px,
    calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%,
    4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px),
    0 calc(100% - 4px), 0 4px, 2px 4px, 2px 2px, 4px 2px);
}

/* A pixel line under each step that tracks the cursor, snapped to the raster. */
.step .pxline{ position:absolute; left:0; right:0; bottom:0; height:8px; opacity:0; transition:opacity .25s ease; }
.step .pxline::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 9px);
}
.step .pxline i{
  position:absolute; top:0; left:0; width:63px; height:8px;
  background:repeating-linear-gradient(90deg, var(--bone) 0 8px, transparent 8px 9px);
  transform:translateX(var(--lx,0px));
}

@media (hover:hover) and (pointer:fine){
  .steps .step{ transition:opacity .3s ease; }
  .steps:hover .step{ opacity:.45; }
  .steps .step:hover{ opacity:1; }
  .step:hover .pxline{ opacity:1; }
}

/* ============================================================================
   price comparison
   This was an interactive calculator. Making the reader assemble a plan before
   the page would tell them anything put the work on the wrong side: what they
   actually want is the two numbers side by side. A table says it in one look,
   fits one screen, and cannot be misconfigured.
   ========================================================================== */
.calc{ position:relative; z-index:2; padding:0 0 calc(var(--cell)*9); }
.calc .head{ margin-bottom:calc(var(--cell)*2); }
.calc .head h2{
  margin:0; font-size:clamp(30px,4.5vw,46px); font-weight:500;
  line-height:1.04; letter-spacing:-1.4px; max-width:16ch;
}
.calc .head .kick{ margin:var(--cell) 0 0; color:var(--bone-3); }

.ptable{ width:100%; border-collapse:collapse; }
.ptable thead th{
  color:var(--bone-3); font-weight:400; text-align:left;
  padding:0 0 var(--cell); border-bottom:1px solid var(--hairline);
}
.ptable thead th:nth-child(n+2){ text-align:right; }
.ptable tbody th{
  text-align:left; font-weight:400; vertical-align:top;
  padding:var(--cell) var(--cell) var(--cell) 0;
  border-bottom:1px solid var(--hairline-soft);
}
.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td{ border-bottom:1px solid var(--hairline); }
.ptable td{
  text-align:right; vertical-align:top; white-space:nowrap;
  padding:var(--cell) 0;
  border-bottom:1px solid var(--hairline-soft);
  font-variant-numeric:tabular-nums;
}
.p-name{ display:block; font-size:19px; letter-spacing:-.3px; color:var(--bone); }
.p-sub{
  display:block; margin-top:5px; max-width:46ch; white-space:normal;
  font-size:14px; line-height:1.5; letter-spacing:-.05px; color:var(--bone-2);
}
/* the old price, struck: the comparison is the point of the row */
.was{ color:var(--bone-3); font-size:17px; }
.was s{ text-decoration-thickness:1px; text-underline-offset:2px; }
.now{ color:var(--bone); font-size:24px; font-weight:500; letter-spacing:-.5px; }
.unit{ display:block; margin-top:5px; font-weight:400; color:var(--bone-3); white-space:normal; }

.ptotal{
  margin:calc(var(--cell)*2) 0 0; max-width:60ch;
  font-size:clamp(16px,1.35vw,19px); line-height:1.6; letter-spacing:-.15px;
  color:var(--bone-2);
}
.ptotal strong{ color:var(--bone); font-weight:500; }
.ptotal s{ color:var(--bone-3); }
/* the one number worth the accent on this page */
.ptotal .keep{ color:var(--accent); }
.calc-src{ margin:var(--cell) 0 0; max-width:64ch; color:var(--bone-3); }

/* On a phone a three-column price table cannot hold its shape, so each row
   becomes a block: the service, then the two prices side by side under it. */
@media (max-width:699px){
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td{ display:block; width:100%; }
  .ptable thead{ display:none; }
  /* Grid, not flex. Flex looked right and was not: `flex: 1 1 0` gives a cell a
     hypothetical size of zero, and zero always fits whatever space is left, so
     the two price cells never wrapped onto their own line. They sat beside a
     row header that had already taken 100%, grew by nothing, and computed to
     0px wide, which pushed the prices off the right edge. A grid states the two
     columns outright and cannot be talked out of them. */
  .ptable tbody tr{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--cell);
    padding:var(--cell) 0; border-bottom:1px solid var(--hairline-soft);
  }
  .ptable tbody tr:last-child{ border-bottom:1px solid var(--hairline); }
  .ptable tbody th{ grid-column:1 / -1; border:0; padding:0; }
  .ptable td{
    min-width:0; border:0; padding:0;
    text-align:left; vertical-align:top;
  }
  .p-sub{ max-width:none; }
}

/* ============================================================================
   buttons — staircase corners, never a radius
   ========================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-family:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(15px,1.2vw,18px); font-weight:500; letter-spacing:-.18px;
  padding:16px 36px; border:0; cursor:pointer;
  background:var(--bone); color:var(--ground);
  transition:background .2s ease;
  clip-path:polygon(
    10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, calc(100% - 5px) 5px,
    calc(100% - 5px) 10px, 100% 10px, 100% calc(100% - 10px),
    calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 5px),
    calc(100% - 10px) calc(100% - 5px), calc(100% - 10px) 100%, 10px 100%,
    10px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 10px),
    0 calc(100% - 10px), 0 10px, 5px 10px, 5px 5px, 10px 5px);
}
.btn:hover{ background:var(--bone-press); }   /* colour only — never a lift */
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* ============================================================================
   cta
   ========================================================================== */
.cta{ position:relative; z-index:2; padding:calc(var(--cell)*9) 0 calc(var(--cell)*12); text-align:center; }
.marquee{ width:100%; height:clamp(64px,13vw,168px); margin-bottom:calc(var(--cell)*3); }
.marquee canvas{ width:100%; height:100%; }
.cta .meta{
  margin:calc(var(--cell)*2) auto 0; max-width:46ch;
  font-size:clamp(15px,1.2vw,19px); line-height:1.6; letter-spacing:-.15px;
  color:var(--bone-2); text-wrap:balance;
}
.cta .meta.near{ margin-top:var(--cell); }
.cta .meta a{
  color:var(--bone); text-decoration:none; padding-bottom:2px;
  background:repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 7px) left bottom / 0% 3px no-repeat;
  transition:background-size .45s var(--ease);
}
.cta .meta a:hover{ background-size:100% 3px; }

/* ============================================================================
   footer — a quiet rasterised horizon, and nothing else
   ========================================================================== */
footer{ position:relative; z-index:2; border-top:1px solid var(--hairline); }
.foot-in{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--cell); padding-top:calc(var(--cell)*2); padding-bottom:calc(var(--cell)*2);
}
.foot-in p{ margin:0; color:var(--bone-3); }
#horizon{ width:100%; height:calc(var(--cell)*5); }

@media (max-width:680px){
  .foot-in{ flex-direction:column; gap:7px; }
}

/* ============================================================================
   reveals — the entire scroll motion budget
   The resting state is *visible*. The hidden state applies only when a script
   is running to reverse it (`.js`), and the inline failsafe drops that class if
   the modules never boot. No-JS and reduced-motion both land on the same
   correct page rather than on a blank one.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
  .js .reveal.in{ opacity:1; transform:none; }

  /* the stepped headline reveal */
  .ln > span{ transform:translateY(115%); animation:lineUp .9s steps(7) both; }
  .hl .ln:nth-child(1) > span{ animation-delay:.08s; }
  .hl .ln:nth-child(2) > span{ animation-delay:.20s; }
  .hdesc .ln:nth-child(1) > span{ animation-delay:.34s; }
  .hdesc .ln:nth-child(2) > span{ animation-delay:.42s; }
}

@keyframes lineUp{ to{ transform:translateY(0); } }