/* ==========================================================================
   Leave It To Us - LIIU Outdoor Living
   One-page landing site. Bright, spacious, two typefaces, one accent.
   Palette derived from the client's own logo (#035B2B green, #1C2125 charcoal).
   ========================================================================== */

:root{
  --paper:      #FFFFFF;
  --mist:       #F4F6F4;
  --green:      #035B2B;
  --green-lift: #0B8A45;
  --charcoal:   #1C2125;
  --slate:      #5C6560;
  --line:       #E3E8E4;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1240px;
  --gut: 1.5rem;
  --r: 4px;

  --bar: 4.5rem;      /* sticky header */
  --callbar: 4.25rem; /* mobile call bar */

  --shadow: 0 1px 2px rgba(28,33,37,.04), 0 12px 32px rgba(28,33,37,.07);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + 1rem); }

body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 6.4vw, 4.6rem); font-weight:800; }
h2{ font-size:clamp(1.9rem, 3.9vw, 3rem); }
h3{ font-size:1.2rem; letter-spacing:-.02em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--green); }

:focus-visible{ outline:3px solid var(--green-lift); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:60ch; }

.lede{ font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--slate); line-height:1.6; }

.eyebrow{
  font-family:var(--body);
  font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--green);
  margin:0 0 1rem;
}
.eyebrow--light{ color:rgba(255,255,255,.82); }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--green); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r);
  text-decoration:none; transition:top .15s ease;
}
.skip-link:focus{ top:.75rem; }

/* ---------- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:.85rem 1.6rem;
  font-family:var(--body); font-size:1rem; font-weight:600; letter-spacing:-.01em;
  border:1.5px solid transparent; border-radius:var(--r);
  text-decoration:none; cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--green); color:#fff; border-color:var(--green); }
.btn--primary:hover{ background:var(--green-lift); border-color:var(--green-lift); }
.btn--ghost{ background:transparent; color:var(--charcoal); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--green); color:var(--green); }
.btn--light{ background:#fff; color:var(--charcoal); border-color:#fff; }
.btn--light:hover{ background:rgba(255,255,255,.88); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- header ----------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--bar);
}
.brand{ display:block; text-decoration:none; flex:none; }
.brand__logo{ height:34px; width:auto; }
@media (min-width:700px){ .brand__logo{ height:40px; } }

.nav__list{
  list-style:none; display:flex; align-items:center; gap:1.9rem;
  margin:0; padding:0;
}
.nav__list a{
  color:var(--charcoal); text-decoration:none; font-size:.95rem; font-weight:500;
  padding:.4rem 0; border-bottom:2px solid transparent;
}
.nav__list a:hover{ color:var(--green); border-bottom-color:var(--green); }

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:0 11px;
  background:none; border:0; cursor:pointer; margin-left:auto;
}
.nav-toggle span{
  display:block; height:2px; background:var(--charcoal); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav{
  position:fixed; inset:var(--bar) 0 auto 0;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:1rem var(--gut) 1.6rem;
  display:none;
}
.nav.is-open{ display:block; }
.nav .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
.nav .nav__list a{
  display:block; padding:.95rem 0; border-bottom:1px solid var(--line);
  font-size:1.05rem;
}
.nav .btn{ width:100%; margin-top:1.1rem; }

@media (min-width:60rem){
  .nav-toggle{ display:none; }
  .nav{
    position:static; display:flex; align-items:center; gap:1.9rem;
    background:none; border:0; padding:0; inset:auto;
  }
  .nav .nav__list{ flex-direction:row; align-items:center; gap:1.9rem; }
  .nav .nav__list a{ border-bottom:2px solid transparent; padding:.4rem 0; font-size:.95rem; }
  .nav .btn{ width:auto; margin-top:0; min-height:44px; padding:.6rem 1.15rem; }
}

/* ---------- hero ------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(24rem, 62vh, 36rem);
  display:flex; align-items:flex-end;
  padding:5rem 0 clamp(3rem,6vw,5rem);
  background:var(--charcoal);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media img,
.hero__media .ph{ width:100%; height:100%; object-fit:cover; }
/* Two light ramps rather than one heavy wash: the vertical keeps the sky open and
   only darkens under the copy, the horizontal buys legibility on the left. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(28,33,37,.46) 0%, rgba(28,33,37,.12) 46%, rgba(28,33,37,0) 66%),
    linear-gradient(180deg, rgba(28,33,37,.10) 0%, rgba(28,33,37,.20) 55%, rgba(28,33,37,.82) 100%);
}
.hero__inner{ color:#fff; max-width:44rem; }
.hero h1{ color:#fff; margin-bottom:.5em; }
.hero__lede{ color:rgba(255,255,255,.9); font-size:clamp(1.05rem,1.8vw,1.3rem); max-width:36rem; }
.hero .btn-row{ margin-top:2rem; }

/* ---------- trust strip ------------------------------------------------ */
.trust{ background:var(--charcoal); color:#fff; }
.trust__list{
  list-style:none; margin:0; padding:1.15rem 0;
  display:flex; flex-wrap:wrap; gap:.6rem 2.4rem;
  font-size:.9rem; font-weight:500;
}
.trust__list li{ display:flex; align-items:center; gap:.55rem; color:rgba(255,255,255,.88); }
.trust__list svg{ width:16px; height:16px; flex:none; color:var(--green-lift); }

/* ---------- sections --------------------------------------------------- */
.section{ padding:clamp(4rem, 8.5vw, 7.5rem) 0; }
.section--mist{ background:var(--mist); }
.section--dark{ background:var(--charcoal); color:#fff; }
.section--dark h2{ color:#fff; }
.section--dark p{ color:rgba(255,255,255,.78); }

.section__head{ max-width:46rem; margin-bottom:clamp(2.5rem,4vw,3.5rem); }
.section__head p{ color:var(--slate); font-size:clamp(1rem,1.5vw,1.15rem); }
.section--dark .section__head p{ color:rgba(255,255,255,.72); }
.section__head--center{ margin-inline:auto; text-align:center; }

/* ---------- service cards ---------------------------------------------- */
.cards{ display:grid; gap:1.75rem; grid-template-columns:1fr; }
@media (min-width:48rem){ .cards{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent; }
.card__media{ aspect-ratio:16/10; }
.card__media picture{ display:block; height:100%; }
.card__media img,
.card__media .ph{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:1.5rem 1.5rem 1.75rem; }
.card__body h3{ margin-bottom:.5rem; }
.card__body p{ color:var(--slate); font-size:.98rem; }
.card__tag{
  display:inline-block; margin-bottom:.7rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
}

/* ---------- split ------------------------------------------------------ */
.split{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:56rem){
  .split{ grid-template-columns:1fr 1fr; }
  .split--flip .split__media{ order:2; }
}
.split__media picture{ display:block; }
.split__media img,
.split__media .ph{ width:100%; height:auto; aspect-ratio:3/2; max-height:340px; object-fit:cover; border-radius:var(--r); }

/* ---------- SIGNATURE: driveway cross-section -------------------------- */
.buildup{ display:flex; flex-direction:column; gap:2px; }
.buildup__layer{
  position:relative;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem;
  padding:1.15rem 1.25rem;
  border-radius:2px;
  font-size:.95rem;
}
.buildup__layer strong{ font-weight:600; letter-spacing:-.01em; }
.buildup__layer span{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  opacity:.62; font-weight:600; white-space:nowrap;
}
/* four bands, top (visible surface) to bottom (formation) */
.buildup__layer:nth-child(1){ background:var(--green);      color:#fff; }
.buildup__layer:nth-child(2){ background:#2C6B49;           color:#fff; }
.buildup__layer:nth-child(3){ background:#55736A;           color:#fff; }
.buildup__layer:nth-child(4){ background:#7A8B85;           color:#fff; }
.buildup__note{
  margin-top:1rem; font-size:.85rem; color:var(--slate);
  display:flex; align-items:flex-start; gap:.5rem;
}
.buildup__note svg{ width:15px; height:15px; flex:none; margin-top:.28rem; color:var(--green); }
.section--dark .buildup__note{ color:rgba(255,255,255,.62); }
.section--dark .buildup__note svg{ color:var(--green-lift); }

/* ---------- gallery ---------------------------------------------------- */
.gallery{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:44rem){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:72rem){ .gallery{ gap:1.15rem; } }
.gallery figure{ margin:0; }
.gallery img,
.gallery .ph{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); }
.gallery picture{ display:block; }
.gallery figcaption{
  margin-top:.6rem; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green);
}

/* ---------- service list ----------------------------------------------- */
.svc-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 2.5rem; grid-template-columns:1fr;
}
@media (min-width:40rem){ .svc-list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem){ .svc-list{ grid-template-columns:repeat(3,1fr); } }
.svc-list li{
  display:flex; align-items:center; gap:.75rem;
  padding:.95rem 0; border-bottom:1px solid var(--line);
  font-size:1rem;
}
.svc-list svg{ width:15px; height:15px; flex:none; color:var(--green); }

/* ---------- areas ------------------------------------------------------ */
.areas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.areas li{
  border:1px solid var(--line); background:var(--paper);
  border-radius:100px; padding:.55rem 1.1rem;
  font-size:.94rem; color:var(--charcoal);
}
.areas li[data-core]{ border-color:var(--green); color:var(--green); font-weight:600; }

/* ---------- contact ---------------------------------------------------- */
.contact{ display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:1fr; }
@media (min-width:56rem){ .contact{ grid-template-columns:1.1fr .9fr; } }

.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.88rem; font-weight:600; margin-bottom:.4rem; }
.field input,
.field select,
.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--charcoal);
  padding:.85rem .95rem; min-height:52px;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r);
}
.field textarea{ min-height:8rem; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--green); outline:none; box-shadow:0 0 0 3px rgba(3,91,43,.13); }

.detail{ list-style:none; margin:0 0 2rem; padding:0; }
.detail li{ display:flex; gap:.9rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.detail svg{ width:19px; height:19px; flex:none; color:var(--green); margin-top:.2rem; }
.detail dt{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:.15rem; }
.detail dd{ margin:0; font-size:1.05rem; font-weight:500; }
.detail a{ text-decoration:none; }
.detail a:hover{ text-decoration:underline; }

/* ---------- photo placeholder (until the client's photos land) ---------- */
.ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; padding:1.25rem;
  background:
    repeating-linear-gradient(45deg, rgba(3,91,43,.035) 0 12px, transparent 12px 24px),
    var(--mist);
  border:1px dashed rgba(3,91,43,.28);
  color:var(--green);
}
.ph svg{ width:26px; height:26px; opacity:.5; }
.ph span{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  opacity:.75; line-height:1.4;
}
.hero .ph{ border:0; }
.hero .ph span{ color:rgba(255,255,255,.7); }
.hero .ph svg{ color:rgba(255,255,255,.5); }

/* ---------- footer ----------------------------------------------------- */
.site-footer{
  background:var(--charcoal); color:rgba(255,255,255,.72);
  padding:clamp(3rem,6vw,4.5rem) 0 calc(2rem + var(--callbar));
  font-size:.94rem;
}
@media (min-width:60rem){ .site-footer{ padding-bottom:2.5rem; } }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:48rem){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-footer h2{ font-size:1.15rem; color:#fff; margin-bottom:.6rem; }
.site-footer h3{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:.9rem;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:.55rem; }
.site-footer a{ color:rgba(255,255,255,.82); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.85rem; color:rgba(255,255,255,.55);
}

/* ---------- mobile call bar -------------------------------------------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(28,33,37,.09);
}
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--callbar); text-decoration:none;
  font-weight:600; font-size:.98rem; color:var(--charcoal);
}
.callbar a:first-child{ background:var(--green); color:#fff; }
.callbar svg{ width:18px; height:18px; }
@media (min-width:60rem){ .callbar{ display:none; } }
body{ padding-bottom:var(--callbar); }
@media (min-width:60rem){ body{ padding-bottom:0; } }

/* ---------- scroll reveal ---------------------------------------------- */
/* Content is visible by default. The hidden state only applies once main.js
   has added .reveal-on, which it does immediately before it starts observing.
   So if that script fails to load or parse, the page loses its animation and
   keeps its content - the failure mode is dull, not blank. Never invert this. */
.reveal-on .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal-on .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal-on .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- interior page header --------------------------------------- */
/* Compact counterpart to .hero: same voice, none of the height, because an
   interior page should get to its content fast. */
.pagehead{
  background:var(--charcoal); color:#fff;
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.6rem,5vw,4rem);
}
.pagehead h1{
  color:#fff; font-size:clamp(2.1rem,4.8vw,3.6rem); max-width:20ch; margin-bottom:.45em;
}
.pagehead p{
  color:rgba(255,255,255,.78); font-size:clamp(1rem,1.6vw,1.2rem); max-width:56ch;
}
.pagehead .btn-row{ margin-top:2rem; }

.crumb{ font-size:.85rem; color:rgba(255,255,255,.55); margin:0 0 1.2rem; }
.crumb a{ color:rgba(255,255,255,.78); text-decoration:none; }
.crumb a:hover{ color:#fff; text-decoration:underline; }

/* plain text cards, used where we have no honest photograph to show */
.card--text .card__body{ padding-top:1.75rem; }
.card--text{ border-top:3px solid var(--green); }

/* closing call to action */
.cta{ text-align:center; }
.cta .btn-row{ justify-content:center; margin-top:1.6rem; }

/* ---------- numbered process list -------------------------------------- */
/* Numbers earn their place here: a driveway genuinely is a sequence, and the
   order is the point - the dig has to happen before the surface. */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps li{
  counter-increment:step;
  position:relative; padding:0 0 1.5rem 3.1rem;
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:.05rem;
  font-family:var(--display); font-size:.82rem; font-weight:700;
  letter-spacing:.06em; color:var(--green);
  width:2.1rem; padding-top:.28rem;
  border-top:2px solid var(--green);
}
.steps li:last-child{ padding-bottom:0; }
.steps h3{ margin:0 0 .3rem; font-size:1.05rem; }
.steps p{ margin:0; color:var(--slate); font-size:.97rem; }
.section--dark .steps p{ color:rgba(255,255,255,.72); }
.section--dark .steps li::before{ color:var(--green-lift); border-top-color:var(--green-lift); }

/* ---------- video hero ------------------------------------------------- */
/* The clip is decoration over a poster that always paints first, so the hero
   is never empty and never costs mobile data. */
.hero__media video{
  width:100%; height:100%; object-fit:cover; display:block;
  /* the hero box is wider than the clip, so cover crops top and bottom.
     Bias downward to keep the driveway rather than the sky. */
  object-position:50% 72%;
}
.hero--drive .hero__media img{ object-position:50% 72%; }
@media (max-width: 47.9375rem){
  .hero__media video{ display:none; }
}

/* ---------- opening hours table ---------------------------------------- */
.hours{
  width:100%; border-collapse:collapse; margin-top:.4rem;
  font-size:.98rem;
}
.hours caption{
  text-align:left; font-size:.75rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); padding-bottom:.7rem;
}
.hours th,
.hours td{ padding:.7rem 0; border-bottom:1px solid var(--line); text-align:left; }
.hours th{ font-weight:500; color:var(--charcoal); }
.hours td{ color:var(--slate); text-align:right; font-variant-numeric:tabular-nums; }
.hours tr:last-child th,
.hours tr:last-child td{ border-bottom:0; }
.hours .is-closed{ color:var(--slate); opacity:.75; }
.section--mist .hours th,
.section--mist .hours td{ border-bottom-color:#E1E6E2; }

/* ---------- before / after pair ---------------------------------------- */
/* Stacked on phones so each photo gets the full column width. Two narrow
   columns on a 375px screen left them too small to read. */
.ba-pair{
  display:grid; gap:1rem; grid-template-columns:1fr;
  max-width:820px; margin-inline:auto;
}
.ba-pair figure{ margin:0; }
.ba-pair picture{ display:block; }
.ba-pair img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r);
}
.ba-pair figcaption{
  margin-top:.6rem; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green);
}
@media (min-width:34rem){
  .ba-pair{ grid-template-columns:1fr 1fr; }
}

/* The driveway clip, now sitting in a split rather than behind a headline.
   Phones get the still and never fetch the video (preload="none"), so the
   motion costs no mobile data. Exactly one of the two is ever displayed. */
.split__video,
.split__poster{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--r);
}
/* scoped to .split__media so these beat the generic `.split__media picture`
   rule above, which would otherwise force the poster visible on desktop */
.split__media .split__poster{ display:block; }
.split__media .split__video{ display:none; }
@media (min-width:48rem){
  .split__media .split__poster{ display:none; }
  .split__media .split__video{ display:block; }
}

/* ---------- cookie / privacy notice ------------------------------------ */
/* Deliberately small and corner-anchored rather than a full-screen wall.
   The site sets no tracking cookies, so this informs rather than gates. */
.notice{
  position:fixed; z-index:130;
  left:1rem; right:1rem; bottom:calc(var(--callbar) + 1rem);
  background:var(--charcoal); color:rgba(255,255,255,.86);
  border-radius:var(--r); padding:1rem 1.1rem;
  box-shadow:0 10px 40px rgba(28,33,37,.28);
  font-size:.86rem; line-height:1.55;
  display:none;
}
.notice[data-show]{ display:block; }
@media (min-width:48rem){
  .notice{ left:1.5rem; right:auto; bottom:1.5rem; max-width:26rem; padding:1.25rem 1.35rem; }
}
.notice p{ margin:0 0 .9rem; }
.notice a{ color:var(--green-lift); }
.notice__row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.notice__btn{
  appearance:none; border:0; cursor:pointer;
  background:#fff; color:var(--charcoal);
  font:600 .88rem/1 var(--body); letter-spacing:-.01em;
  padding:.7rem 1.2rem; border-radius:var(--r); min-height:42px;
}
.notice__btn:hover{ background:rgba(255,255,255,.88); }