:root{
    /* Pulled off the logo: the deep navy ring, the red disc, the white field.
       Same structural role as the route12 asphalt palette, on-brand colours. */
    --navy:#0C1530;
    --navy-lift:#14203F;
    --navy-edge:#1F2C4F;
    --sign:#F3F6FB;
    --shield:#CE0E3C;
    --steel:#8E9AB2;
    --stripe:#2E6FD9;

    --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
    --body:"Barlow","Helvetica Neue",Arial,sans-serif;
    --data:"Barlow Condensed","Arial Narrow",Arial,sans-serif;

    --shell:1120px;
    /* The gutters below are the safe-area insets. On a notched iPhone in
       landscape the notch eats into one side of the viewport, and with
       viewport-fit=cover the page paints underneath it - so the horizontal
       padding has to grow by whatever the system reports. max() keeps the
       normal value on every device that reports zero, which is most of them. */
    --pad:max(clamp(20px,5vw,48px), env(safe-area-inset-left), env(safe-area-inset-right));
  }

  *{box-sizing:border-box}

  body{
    margin:0;
    background:var(--navy);
    color:var(--sign);
    font-family:var(--body);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    /* iOS inflates text in some reflow situations unless this is pinned, which
       silently breaks a layout tuned at real sizes. */
    -webkit-text-size-adjust:100%;
    /* the default is an opaque grey flash on every tap; this keeps the feedback
       but stops it reading as a rendering glitch on dark panels */
    -webkit-tap-highlight-color:rgba(255,255,255,.08);
  }

  img{max-width:100%}

  .shell{max-width:var(--shell);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

  .eyebrow{
    font-family:var(--data);
    font-weight:700;
    font-size:13px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--steel);
    margin:0;
  }
  .eyebrow .mark{color:var(--shield)}

  h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;text-wrap:balance;margin:0;line-height:.92;letter-spacing:-.01em}
  h1{font-size:clamp(44px,8.4vw,84px)}
  h2{font-size:clamp(32px,5.2vw,54px)}
  h3{font-size:clamp(22px,2.4vw,27px)}

  p{margin:0}
  .lede{font-size:clamp(17px,1.9vw,20px);color:#C4CCDA;max-width:56ch}

  a{color:inherit}

  /* the dashed rule reads as a run of gutter seams rather than a road lane */
  .seam{
    height:6px;
    border:0;
    margin:0;
    background:repeating-linear-gradient(90deg,var(--navy-edge) 0 44px,transparent 44px 76px);
  }

  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--data);font-weight:700;font-size:17px;
    letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
    padding:15px 26px;border-radius:2px;
    transition:transform .15s ease,background-color .15s ease;
  }
  .btn-primary{background:var(--shield);color:#fff;box-shadow:0 10px 26px -14px rgba(206,14,60,.9)}
  .btn-primary:hover{background:#E51648;transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--sign);border:1px solid var(--navy-edge)}
  .btn-ghost:hover{border-color:var(--steel);transform:translateY(-2px)}
  a:focus-visible,button:focus-visible{outline:3px solid var(--stripe);outline-offset:3px}

  /* ---- masthead ----
     Three tracks so the links sit dead centre of the viewport rather than
     centre of the remaining space: the outer columns are 1fr each, so whatever
     the brand and the utilities weigh, the middle stays put. Full-bleed with
     its own padding, not inside .shell, or the brand floats off the left edge. */
  .nav{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:clamp(12px,2.2vw,32px);
    padding:14px var(--pad);border-bottom:1px solid var(--navy-edge);
  }
  .nav-brand{display:flex;align-items:center;gap:13px;text-decoration:none;justify-self:start}
  .nav-brand img{width:clamp(46px,3.8vw,56px);height:auto;display:block}
  .nav-brand b{
    font-family:var(--display);font-weight:800;
    font-size:clamp(16px,1.35vw,21px);line-height:1;
    text-transform:uppercase;white-space:nowrap;
  }
  .nav-right{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);justify-self:end}
  .nav-links{display:flex;gap:clamp(14px,1.8vw,30px);justify-self:center}
  .nav-links a{
    font-family:var(--data);font-size:13px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--steel);text-decoration:none;transition:color .2s ease;
  }
  .nav-links a:hover{color:var(--sign)}
  .nav-pill{
    font-family:var(--data);font-size:11px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--steel);
    border:1px solid var(--navy-edge);border-radius:999px;padding:7px 14px;flex:none;
  }
  .nav-cta{
    font-family:var(--data);font-size:13px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;background:var(--shield);color:#fff;text-decoration:none;
    border-radius:999px;padding:10px 18px;flex:none;transition:background-color .2s ease;
  }
  .nav-cta:hover{background:#E51648}

  /* ---- hero ----
     One dark field, edge to edge: the model sits on the left, the copy on the
     right, and there is no seam between them because the artwork's own backdrop
     and the page background are the same family of navy.

     The previous hero split the screen down the middle with a light panel on
     the right. That worked when the left half was a photograph with hard edges;
     it cannot work with a render that fades into its own background, because
     the join would land in the middle of the fade.

     The nav and the hero share one viewport exactly. A flex column with the
     hero on flex:1 gets there without hard-coding the nav height, which wraps
     and clamps. svh first so mobile browser chrome does not push the fold
     off-screen. */
  /* No one-viewport lock: the hero is a banner of fixed ratio, and stretching it
     to fill a screen only opens a navy gap above the picture. */
  .screen{display:flex;flex-direction:column}
  .screen>.hx{flex:0 0 auto}

  /* Banner behind, words on glass in front.
     The artwork is a finished composition and every part of it is busy, so the
     copy cannot sit in a column beside it and cannot sit on bare sky either. A
     frosted band is what buys the contrast: it darkens and blurs the strip under
     the text and leaves the rest of the picture alone.

     A band across the foot rather than a card in the corner, because a card wide
     enough for this copy lands squarely on the mascot. The band takes the paving
     and the bottom of the truck, which is the part of the picture carrying the
     least. */
  .hx{position:relative;isolation:isolate;background:#0C1530}

  .hx-banner{display:block;width:100%}
  .hx-banner img{display:block;width:100%;height:auto}

  /* A wash that only reaches as high as the band, so the mascot and the logo
     keep their own light. */
  .hx::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,
      rgba(6,12,32,.72) 0%, rgba(6,12,32,.34) 24%,
      rgba(6,12,32,.06) 42%, rgba(6,12,32,0) 56%);
  }

  .hx-panel{
    position:absolute;z-index:2;left:0;right:0;bottom:0;
    display:grid;
    /* Three across, so the band is only as tall as the headline. Stacked, it
       ran to 42% of the picture and swallowed the truck and the mascot's legs. */
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;
    align-items:end;
    gap:clamp(16px,2.4vw,40px);
    padding:clamp(18px,2vw,26px) var(--pad) clamp(18px,2vw,24px);
    border-top:1px solid rgba(255,255,255,.16);
    /* The glass. backdrop-filter is what makes it read as a pane rather than as
       a dark bar: the picture behind it is still there, blurred and lifted. The
       3px dot lattice on top is almost invisible on its own and is the thing
       that stops it looking like a flat overlay. */
    background:
      radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 3px 3px,
      linear-gradient(180deg, rgba(10,20,46,.62), rgba(6,12,32,.78));
    -webkit-backdrop-filter:blur(18px) saturate(125%);
            backdrop-filter:blur(18px) saturate(125%);
  }
  /* Without backdrop-filter the band is a translucent window onto a busy
     picture, which is unreadable. Fall back to an almost solid bar. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .hx-panel{background:
      radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 3px 3px,
      linear-gradient(180deg, rgba(10,20,46,.93), rgba(6,12,32,.96));}
  }

  /* One hairline along the top edge, the way a sheet of glass catches light on
     its edge. It is the only thing that says "pane" outright. */
  .hx-panel::before{
    content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
    background:linear-gradient(90deg,
      transparent, rgba(255,255,255,.26) 24%, rgba(255,255,255,.30) 64%, transparent);
  }

  /* Kicker and headline, then the sentence, then the link. The tagline that
     used to sit here is gone: the artwork behind it already says Building a
     Stronger Tomorrow, and Built for a better tomorrow underneath was the same
     line twice. */
  .hx-lead{min-width:0}
  /* The kicker is small type, and at the top of the band the glass is at its
     thinnest. Over the white truck and the sky behind it, the site steel runs
     about 2.5:1 there - so on the glass it is lifted. Worked out against the
     brightest thing the band can sit on, not against the average. */
  .hx-panel .hx-kicker{color:#C9D4E6}

  .hx-kicker{
    margin:0;font-family:var(--data);font-weight:600;font-size:13px;
    letter-spacing:.22em;text-transform:uppercase;color:#93A4C2;
  }
  /* Sentence case and the body face, not the condensed display caps used
     everywhere else - the register is the whole reason this hero reads calm. */
  .hx-panel h1{
    margin:18px 0 0;
    font-family:var(--body);font-weight:700;
    font-size:clamp(32px,3.6vw,56px);line-height:1.06;
    letter-spacing:-.02em;text-transform:none;color:#FFFFFF;
    /* 18ch breaks it into the same three lines as the comp; at 14ch it fell to
       four and the block went tall and narrow */
    max-width:18ch;
  }
  .hx-note{margin:22px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.62;color:#B6C3D8;max-width:38ch}
  .hx-link{
    display:inline-flex;align-items:center;gap:12px;
    margin-top:34px;padding-bottom:10px;
    font-family:var(--data);font-weight:700;font-size:15px;
    letter-spacing:.16em;text-transform:uppercase;
    color:#FFFFFF;text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.45);
    transition:color .2s ease,border-color .2s ease;
  }
  .hx-link svg{width:20px;height:20px;transition:transform .25s ease}
  .hx-link:hover{border-color:var(--shield)}
  .hx-link:hover svg{transform:translateX(5px)}

  .hx-tags{
    position:absolute;left:var(--pad);bottom:clamp(20px,3vw,34px);
    margin:0;font-family:var(--data);font-weight:600;font-size:12.5px;
    letter-spacing:.2em;text-transform:uppercase;color:#7F90AE;
  }
  .hx-tags span{color:#42537A;margin:0 10px}
  /* the diamond in the kicker, matching the .eyebrow .mark used on the other pages */
  .hx-kicker span{color:var(--shield);margin:0 4px}

  /* ---- hero entrance ----
     fill-mode is `backwards`, never `both` - `both` retains the end transform
     and would outrank any hover state for good. Base styles are already the
     settled state, so no-animation simply renders it. */
  @keyframes ug-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes ug-fade{from{opacity:0}to{opacity:1}}

  .nav,
  .hx-kicker,
  .hx-panel h1,
  .hx-note,
  .hx-link,
  .hx-tags{animation:ug-rise .62s cubic-bezier(.16,1,.3,1) backwards}

  /* the banner only fades - sliding a full-bleed composition shows its own edge */
  .hx-banner{animation:ug-fade 1s cubic-bezier(.16,1,.3,1) backwards}

  .nav{animation-delay:.06s}
  .hx-banner{animation-delay:.1s}
  .hx-kicker{animation-delay:.3s}
  .hx-panel h1{animation-delay:.4s}
  .hx-note{animation-delay:.58s}
  .hx-link{animation-delay:.72s}
  .hx-tags{animation-delay:.86s}

  section{padding-top:clamp(52px,7vw,88px);padding-bottom:clamp(52px,7vw,88px)}
  .sec-head{margin-bottom:clamp(26px,3.5vw,40px)}
  .sec-head h2{margin-top:10px}
  .sec-head .lede{margin-top:14px}

  /* ---- services carousel ---- */
  .oc{position:relative}
  .oc-track{
    display:flex;gap:clamp(16px,2vw,24px);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .oc-track::-webkit-scrollbar{display:none}

  /* Three cards fit inside the shell with room to spare, and pinned to a fixed
     width they leave a hole on the right of a centred row. When the rail holds
     three or fewer, let them share the width instead.

     Written as :has() rather than a hand-set width so that putting the other
     cards back restores the scrolling rail on its own - flex:0 0 is what makes
     the track overflow and scroll, and a card that can shrink would quietly
     kill that. Below 1000px the cards stay fixed and scroll, which is what a
     phone wants anyway. */
  @media (min-width:1000px){
    .oc-track:has(.oc-card:nth-child(-n+3):last-child) .oc-card{flex:1 1 0}
  }

  .oc-card{
    flex:0 0 clamp(252px,74vw,318px);
    scroll-snap-align:start;
    display:flex;flex-direction:column;
    background:var(--navy-lift);
    border:1px solid var(--navy-edge);
    border-radius:16px;overflow:hidden;
    text-decoration:none;color:inherit;
    transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s ease;
  }
  .oc-card:hover,.oc-card:focus-visible{transform:translateY(-8px);border-color:#33426E}

  /* Every other card dials the phone; this one navigates. The red top rule is
     the only signal the rail gives that one card behaves differently, and it
     matches the rule on the free-estimate band above. */
  .oc-card-lead{border-top:3px solid var(--shield)}
  .oc-card-lead .oc-cta{color:var(--shield)}

  /* the job photos are landscape 4:3 and filled, not letterboxed */
  .oc-media{aspect-ratio:4/3;background:#070B18;overflow:hidden}
  .oc-media img{
    display:block;width:100%;height:100%;object-fit:cover;
    transition:transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .oc-card:hover .oc-media img{transform:scale(1.06)}

  .oc-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
  .oc-tag{
    display:flex;align-items:center;gap:8px;
    font-family:var(--data);font-size:12px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  }
  .oc-tag svg{width:15px;height:15px;color:var(--shield);flex:none}
  .oc-title{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;text-transform:uppercase;margin:0}
  .oc-desc{font-size:14px;color:#A6B0C6}
  .oc-foot{
    margin-top:auto;padding-top:14px;border-top:1px solid var(--navy-edge);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .oc-cta{font-family:var(--data);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
  .oc-go{
    width:36px;height:36px;border-radius:50%;flex:none;
    background:var(--navy-edge);color:var(--sign);
    display:flex;align-items:center;justify-content:center;
    transition:transform .3s ease,background-color .3s ease;
  }
  .oc-go svg{width:17px;height:17px}
  .oc-card:hover .oc-go{transform:rotate(-45deg);background:var(--shield);color:#fff}

  .oc-nav{
    position:absolute;top:32%;z-index:2;
    width:44px;height:44px;border-radius:50%;padding:0;
    background:rgba(12,21,48,.72);backdrop-filter:blur(8px);
    border:1px solid var(--navy-edge);color:var(--sign);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    opacity:0;transition:opacity .3s ease,background-color .2s ease;
  }
  .oc:hover .oc-nav,.oc-nav:focus-visible{opacity:1}
  .oc-nav:hover{background:rgba(12,21,48,.95);border-color:var(--steel)}
  /* !important because .oc:hover .oc-nav outranks this on specificity */
  .oc-nav[disabled]{opacity:0!important;pointer-events:none}
  .oc-nav svg{width:22px;height:22px}
  .oc-prev{left:-8px}
  .oc-next{right:-8px}
  /* touch devices have no hover, so the arrows have to stay put */
  @media (hover:none){.oc-nav{opacity:1}}

  /* ---- materials strip ---- */
  .mats{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,34px)}
  .mats span{
    font-family:var(--data);font-size:13px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--steel);
    border:1px solid var(--navy-edge);border-radius:999px;padding:8px 16px;
  }

  /* ---- service area ----
     1px grid gap over an edge-coloured background draws the hairlines between
     cells without four separate border rules that double up at the seams.

     Explicit counts, not auto-fit: with four cells, auto-fit lands on three
     columns through most of the tablet range and leaves the fourth alone on a
     row beside a bare stretch of the background colour. 4 / 2 / 1 always fill. */
  /* Two states, so two columns. This was repeat(4) when the site claimed MA,
     CT, NH and RI; the client's own shirt says Massachusetts and New Hampshire,
     and two cards in a four-track grid sit as a half-empty row. */
  .areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--navy-edge);border:1px solid var(--navy-edge)}
  .area{background:var(--navy);padding:clamp(20px,2.6vw,28px)}
  .area b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,30px);text-transform:uppercase;line-height:1}
  .area span{display:block;margin-top:8px;font-size:14px;color:var(--steel)}

  .find{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,44px);align-items:start}
  /* The map keeps Google's own colours: its pin is red, which happens to be the
     brand's accent, and inverting the tile art to match the dark page would
     recolour that pin away from the one thing the map is there to show. */
  .mapwrap{
    border:1px solid var(--navy-edge);border-radius:10px;overflow:hidden;
    background:var(--navy-lift);line-height:0;
  }
  .mapwrap iframe{
    display:block;width:100%;border:0;
    height:clamp(280px,32vw,392px);
  }
  .map-cap{
    margin-top:12px;font-family:var(--data);font-size:12px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  }
  .contact-list{display:flex;flex-direction:column;gap:2px;margin-top:20px}
  .crow{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:16px 0;border-bottom:1px solid var(--navy-edge);text-decoration:none;
  }
  .crow:first-child{border-top:1px solid var(--navy-edge)}
  .crow-k{font-family:var(--data);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);flex:none}
  /* the email is the longest value and the only one that needs to wrap, so the
     display face stays but the size steps down and break-word is allowed */
  .crow-v{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,26px);text-transform:uppercase;line-height:1;text-align:right;overflow-wrap:anywhere}
  .crow:hover .crow-v{color:var(--shield)}

  footer{border-top:1px solid var(--navy-edge);padding:34px 0 44px}
  .foot{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center}
  .foot p{font-family:var(--data);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}

  /* ---- touch targets ----
     Measured on a 375px viewport: the nav row came out 21px tall, the
     breadcrumb 21px and the footer links 17px, against a 44px minimum. These
     are all inline text, so the fix is vertical padding and a min-height
     rather than a bigger type size, which would wreck the layout. */
  @media (pointer:coarse){
    .nav-links a{padding:12px 2px;min-height:44px;display:inline-flex;align-items:center}
    .nav-brand{min-height:48px}
    .nav-cta{padding:13px 20px}
    .foot a{padding:13px 0;display:inline-block}
    .promo-in a{padding:13px 4px;display:inline-block}
  }

  @media (max-width:900px){
    .nav-links,.nav-pill{display:none}
    /* The glass comes off on phones. The portrait hero is a stack - mascot over
       the message band - and a panel laid on it would cover one or the other.
       Below the picture the copy needs no help to be read. */
    .hx{display:block}
    .hx::after{display:none}
    .hx-panel{
      position:static;display:flex;flex-direction:column;align-items:flex-start;
      gap:0;border:0;border-top:0;
      background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
      padding:clamp(26px,3.4vw,44px) var(--pad) 0;
    }
    .hx-panel::before{display:none}
    /* Release the one-viewport lock. The hero is a banner of fixed ratio over a
       block of text, and neither can absorb leftover height: flex:1 would hand
       .hx a surplus that shows up as a navy band under the copy. Let it size to
       its own content and run past the fold. */
    .screen{min-height:0}
    .screen>.hx{flex:0 0 auto}
    .hx-panel h1{max-width:20ch}
    .hx-note{max-width:46ch}
    .find{grid-template-columns:1fr}
  }

  @media (max-width:520px){
    .areas{grid-template-columns:minmax(0,1fr)}
  }
  /* ---- phones ----
     Measured on a 375px viewport: the desktop masthead runs the brand name
     under the call button, and hiding the links at 900px leaves no way to
     navigate at all. */
  @media (max-width:640px){
    /* two rows: brand and the call button, then the links centred beneath */
    .nav{
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"brand cta" "links links";
      row-gap:11px;padding:12px var(--pad);
    }
    .nav-brand{grid-area:brand;min-width:0;gap:11px}
    .nav-brand img{width:42px}
    /* shrinks rather than colliding, and still one line */
    .nav-brand b{font-size:clamp(14px,3.9vw,18px)}
    .nav-right{grid-area:cta}
    /* re-shown: the 900px block hides these, and a phone needs them most */
    /* Wraps, because the row outgrew the phone. The home masthead carries six
       links now (Floors was added with the floors page) and at 375px they came
       to 439px against a 375px viewport - the page scrolled sideways by 32px,
       which reads as a broken layout rather than as a long menu. Wrapping to a
       second line costs a few pixels of masthead height and keeps every link
       reachable; dropping one would have hidden a section instead. */
    .nav-links{grid-area:links;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}
    .nav-pill{display:none}
    .nav-cta{padding:12px 17px;font-size:13px}

    /* the copy lines up with every section below it */
    .hx{padding-top:8px}
    .hx-panel h1{font-size:clamp(30px,8vw,40px)}
    /* 27px was under the 44px touch minimum */
    .hx-link{margin-top:24px;padding:9px 0 10px}
    .hx-tags{font-size:11px;letter-spacing:.14em}
    .hx-tags span{margin:0 6px}

    /* the arrows sit on the first card and eat 16% of the width. Swiping is the
       native gesture here, and the half-visible next card already says so. */
    .oc-nav{display:none}
    .oc-track{scroll-padding-left:var(--pad)}

    .mapwrap iframe{height:250px}
    /* label over value: side by side, the email collides with its own key */
    .crow{flex-direction:column;align-items:flex-start;gap:6px}
    .crow-v{text-align:left}
  }

  @media (max-width:520px){
    .btn{width:100%;justify-content:center}
  }