/* GNetindo — PT. Global Internet Indonesia
   Redesign concept: "cahaya di dalam kaca".

   The palette is taken from the thing being sold. Red is the company's own
   logo colour and stays the action colour. Cyan is the light that actually
   travels down a fibre strand, so it belongs to data, speed and coverage and
   is never used for buttons. Navy is the inside of the cable.

   Type: Archivo carries the headlines (tight, engineered, plenty of weight
   at 800/900) and Inter does the reading. Chosen for an infrastructure
   company that has to sound reliable to a homeowner and to a CFO.

   House rule: no em dashes anywhere in copy. */

:root {
  --void:      #05070E;
  --navy:      #0A1020;
  --navy-2:    #111A2E;
  --navy-3:    #1B2740;

  --red:       #E11C2B;
  --red-lit:   #FF3A47;
  --red-deep:  #A81220;

  --cyan:      #3BD8F5;
  --cyan-soft: #8DE9FB;
  --cyan-deep: #0E7E96;

  --paper:     #FFFFFF;
  --mist:      #F3F6FB;
  --mist-2:    #E7ECF5;
  --slate:     #5C6982;
  --slate-lit: #93A0B8;
  --line:      #DDE4EF;
  --line-dark: rgba(255,255,255,.10);

  --ok:        #12996B;

  --shell: 1200px;
  --r:   10px;
  --r-s: 6px;
  --r-l: 20px;

  --sh-s: 0 1px 2px rgba(5,7,14,.06), 0 2px 8px rgba(5,7,14,.06);
  --sh-m: 0 2px 6px rgba(5,7,14,.07), 0 14px 34px rgba(5,7,14,.10);
  --sh-l: 0 8px 22px rgba(5,7,14,.13), 0 34px 70px rgba(5,7,14,.22);
  --glow: 0 0 0 1px rgba(59,216,245,.28), 0 0 34px rgba(59,216,245,.20);

  --ease: cubic-bezier(.22,.85,.28,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0; font-family: Archivo, Inter, sans-serif;
  line-height: 1.04; letter-spacing: -.032em; font-weight: 800;
}
/* Sized so the headline, the lede and the coverage check all sit above the
   fold on a 1080p laptop. An oversized headline that pushes the one action
   this page exists for below the fold is a design that argues with itself. */
h1 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 3.9vw, 3.2rem); }
h3 { font-size: 1.2rem; letter-spacing: -.018em; }
p  { margin: 0 0 1rem; }

.shell { width: min(var(--shell), calc(100% - 2.8rem)); margin-inline: auto; }
.sec { padding: clamp(4.5rem, 8vw, 8rem) 0; }
.sec--tight { padding: clamp(2.6rem, 5vw, 4rem) 0; }

.dark { background: var(--navy); color: #DDE3EE; }
.dark h2, .dark h3, .dark h4 { color: #fff; }
.void { background: var(--void); color: #DDE3EE; }
.mist { background: var(--mist); }

/* Label carries the section's real subject, never decoration. */
.tag {
  display: inline-block; font-family: Archivo, Inter, sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 1.1rem;
}
.dark .tag, .void .tag { color: var(--cyan); }

.lede { font-size: 1.1rem; color: var(--slate); max-width: 60ch; }
.dark .lede, .void .lede { color: #9FACC4; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem 1.9rem; border-radius: var(--r-s); border: 1.5px solid transparent;
  font-family: Inter, sans-serif; font-size: .97rem; font-weight: 600;
  letter-spacing: -.005em; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-lit); box-shadow: 0 8px 24px rgba(225,28,43,.34); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-3); }
.btn--line { border-color: var(--line); color: var(--navy); background: transparent; }
.btn--line:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.dark .btn--line, .void .btn--line { border-color: rgba(255,255,255,.28); color: #fff; }
.dark .btn--line:hover, .void .btn--line:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--wide { width: 100%; }
.btn--sm { padding: .7rem 1.2rem; font-size: .9rem; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 70;
  background: rgba(255,255,255,.9); backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.hdr--onvoid {
  background: rgba(5,7,14,.72); border-bottom-color: var(--line-dark);
}
.hdr__in { display: flex; align-items: center; gap: 1.6rem; height: 76px; }
.brand { margin-right: auto; display: flex; align-items: center; gap: .7rem; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand b {
  font-family: Archivo, sans-serif; font-size: 1.28rem; font-weight: 800;
  text-transform: none;
  letter-spacing: -.03em; line-height: 1; display: block; color: var(--navy);
}
.brand span {
  display: block; font-size: .56rem; letter-spacing: .17em; font-weight: 600;
  color: var(--slate); text-transform: uppercase; margin-top: 2px;
}
.hdr--onvoid .brand b { color: #fff; }
.hdr--onvoid .brand span { color: var(--slate-lit); }

.nav { display: flex; gap: 1.6rem; align-items: center; }
.nav a { font-size: .95rem; font-weight: 500; color: var(--slate); position: relative; padding: .3rem 0; }
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--red);
}
.hdr--onvoid .nav a { color: #A9B4C8; }
.hdr--onvoid .nav a:hover, .hdr--onvoid .nav a[aria-current="page"] { color: #fff; }

.hdr__tel { font-size: .93rem; font-weight: 600; color: var(--navy); }
.hdr--onvoid .hdr__tel { color: #fff; }

.burger { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }
.burger span { display: block; width: 23px; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; }
.hdr--onvoid .burger span { background: #fff; }

/* ---------- hero: the signature ---------- */
/* One orchestrated moment lives here and nowhere else on the page: light
   travelling down fibre strands behind the coverage check. */
.hero { position: relative; background: var(--void); color: #fff; overflow: hidden; }
#fiber { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(59,216,245,.14), transparent 58%),
    linear-gradient(to bottom, rgba(5,7,14,.42) 0%, rgba(5,7,14,.10) 32%, rgba(5,7,14,.92) 100%);
}
.hero__in {
  position: relative; z-index: 2;
  padding: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(2.6rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 4.5vw, 3.6rem);
  align-items: center;
}
.hero h1 { color: #fff; }
.hero h1 i { font-style: normal; color: var(--cyan); }
.hero .lede { color: #A9B6CC; margin-top: 1.1rem; font-size: 1.04rem; max-width: 48ch; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1.1rem 2.2rem; margin-top: 1.6rem;
  padding-top: 1.3rem; border-top: 1px solid var(--line-dark);
}
.hero__trust div { font-size: .85rem; color: #8E9BB4; }
.hero__trust b {
  display: block; font-family: Archivo, sans-serif; font-size: 1.5rem;
  font-weight: 800; color: #fff; letter-spacing: -.035em; line-height: 1.05;
}
.hero__trust b em { font-style: normal; color: var(--cyan); }

/* ---------- coverage check ---------- */
.check {
  background: rgba(17,26,46,.72); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-l);
  padding: 1.5rem; box-shadow: var(--sh-l);
}
.check h2 { font-size: 1.32rem; color: #fff; margin-bottom: .4rem; }
.check p { font-size: .92rem; color: #93A0B8; margin-bottom: 1.2rem; }
.check__row { display: grid; gap: .8rem; }
.fld label {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #8E9BB4; margin-bottom: .45rem;
}
.fld select, .fld input {
  width: 100%; padding: .9rem 1rem; border-radius: var(--r-s);
  border: 1px solid rgba(255,255,255,.16); background: rgba(5,7,14,.6);
  color: #fff; font: inherit; font-size: .96rem; appearance: none;
}
.fld select:focus, .fld input:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(59,216,245,.2);
}
.fld select option { background: var(--navy-2); color: #fff; }

.result { margin-top: 1.1rem; border-radius: var(--r-s); padding: 1rem 1.1rem; display: none; }
.result[data-state] { display: block; animation: pop .32s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.result[data-state="yes"] { background: rgba(18,153,107,.14); border: 1px solid rgba(18,153,107,.42); }
.result[data-state="soon"] { background: rgba(225,168,28,.13); border: 1px solid rgba(225,168,28,.4); }
.result[data-state="no"] { background: rgba(225,28,43,.12); border: 1px solid rgba(225,28,43,.38); }
.result b { display: block; color: #fff; font-size: 1.02rem; margin-bottom: .2rem; }
.result span { font-size: .89rem; color: #A9B6CC; }
.result .btn { margin-top: .9rem; }

/* ---------- speed calculator: the interactive payoff ---------- */
.calc { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.calc__pick { margin: 1.8rem 0 0; }
.calc__val {
  font-family: Archivo, sans-serif; font-size: clamp(3.4rem, 8vw, 5.6rem);
  font-weight: 900; letter-spacing: -.05em; line-height: .95; color: var(--navy);
}
.calc__val small { font-size: .28em; font-weight: 700; letter-spacing: -.01em; color: var(--slate); margin-left: .35rem; }
input[type="range"] {
  width: 100%; margin-top: 1.4rem; appearance: none; height: 5px; border-radius: 4px;
  background: linear-gradient(to right, var(--cyan) 0%, var(--cyan) var(--pct,30%), var(--mist-2) var(--pct,30%));
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); border: 4px solid #fff; box-shadow: var(--sh-m); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy);
  border: 4px solid #fff; box-shadow: var(--sh-m); cursor: grab; border-color: #fff;
}
.calc__steps { display: flex; justify-content: space-between; font-size: .78rem; color: var(--slate); margin-top: .6rem; }

.tasks { display: grid; gap: .7rem; }
.task {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem 1.15rem;
}
.task__ic { width: 44px; height: 44px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--mist); font-size: 1.2rem; }
.task b { display: block; font-size: .98rem; letter-spacing: -.01em; }
.task span { font-size: .84rem; color: var(--slate); }
.task__t {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.1rem;
  letter-spacing: -.03em; color: var(--navy); white-space: nowrap;
}

/* ---------- packages ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
.plan {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 1.9rem 1.7rem; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--sh-m); }
.plan--hot { border-color: var(--navy); background: var(--navy); color: #DDE3EE; box-shadow: var(--sh-l); }
.plan--hot h3, .plan--hot .plan__price { color: #fff; }
.plan__flag {
  position: absolute; top: -12px; left: 1.7rem; background: var(--red); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 100px;
}
.plan h3 { font-size: 1.06rem; margin-bottom: .1rem; }
.plan__for { font-size: .86rem; color: var(--slate); }
.plan--hot .plan__for { color: #93A0B8; }
.plan__speed {
  font-family: Archivo, sans-serif; font-size: 3.1rem; font-weight: 900;
  letter-spacing: -.05em; line-height: 1; margin: 1.1rem 0 .1rem; color: var(--navy);
}
.plan--hot .plan__speed { color: var(--cyan); }
.plan__speed small { font-size: .3em; font-weight: 700; letter-spacing: 0; color: var(--slate); }
.plan--hot .plan__speed small { color: #93A0B8; }
.plan__price { font-size: 1.5rem; font-weight: 800; font-family: Archivo, sans-serif; letter-spacing: -.03em; margin-top: 1.1rem; }
.plan__price small { font-size: .55em; font-weight: 600; color: var(--slate); letter-spacing: 0; }
.plan--hot .plan__price small { color: #93A0B8; }
.plan ul { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.plan li { font-size: .92rem; display: flex; gap: .6rem; align-items: flex-start; color: var(--slate); }
.plan--hot li { color: #B6C0D2; }
.plan li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: .28rem; border-radius: 50%; background: var(--cyan-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.plan--hot li::before { background-color: var(--cyan); }

/* ---------- coverage constellation ---------- */
/* Deliberately a network diagram, not a fake map: these are the areas the
   fibre actually reaches, and drawing a precise coastline we cannot verify
   would be a lie dressed as detail. */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.area {
  border: 1px solid var(--line-dark); border-radius: var(--r); padding: .95rem 1.1rem;
  background: rgba(255,255,255,.03); display: flex; align-items: center; gap: .75rem;
}
.area i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(59,216,245,.16);
}
.area[data-s="soon"] i { background: #E1A81C; box-shadow: 0 0 0 4px rgba(225,168,28,.16); }
.area b { display: block; font-size: .95rem; color: #fff; font-weight: 600; letter-spacing: -.01em; }
.area span { font-size: .78rem; color: #8E9BB4; }

/* ---------- why / features ---------- */
.feat { display: grid; gap: 1.1rem; }
.feat__row {
  display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; align-items: start;
  padding: 1.5rem 0; border-top: 1px solid var(--line);
}
.dark .feat__row, .void .feat__row { border-top-color: var(--line-dark); }
.feat__n {
  font-family: Archivo, sans-serif; font-size: 1.05rem; font-weight: 800;
  color: var(--cyan-deep); letter-spacing: -.02em; padding-top: .1rem;
}
.dark .feat__n, .void .feat__n { color: var(--cyan); }
.feat h3 { margin-bottom: .35rem; }
.feat p { margin: 0; color: var(--slate); font-size: .97rem; }
.dark .feat p, .void .feat p { color: #9FACC4; }

/* ---------- referral promo ---------- */
.promo {
  border-radius: var(--r-l); overflow: hidden; position: relative;
  background: linear-gradient(122deg, var(--red-deep) 0%, var(--red) 46%, #FF5B4A 100%);
  color: #fff; padding: clamp(2.2rem, 5vw, 3.6rem);
}
.promo::after {
  content: ''; position: absolute; right: -12%; top: -40%; width: 58%; height: 190%;
  background: radial-gradient(circle at center, rgba(255,255,255,.2), transparent 62%);
  pointer-events: none;
}
.promo__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 2.4rem; align-items: center; }
.promo h2 { color: #fff; }
.promo p { color: rgba(255,255,255,.9); margin: .9rem 0 1.6rem; max-width: 46ch; }
.promo__amt {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r); padding: 1.5rem; text-align: center; backdrop-filter: blur(6px);
}
.promo__amt b { display: block; font-family: Archivo, sans-serif; font-size: 3.1rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.promo__amt span { font-size: .84rem; opacity: .88; display: block; margin-top: .5rem; }

/* ---------- app band ---------- */
.app { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.phone {
  width: 250px; margin-inline: auto; border-radius: 34px; padding: 11px;
  background: linear-gradient(160deg, #2A3550, #0C1526);
  box-shadow: var(--sh-l), 0 0 0 1px rgba(255,255,255,.1);
}
.phone__scr { background: var(--void); border-radius: 25px; overflow: hidden; padding: 1.1rem .95rem; }
.phone__bar { display: flex; justify-content: space-between; font-size: .62rem; color: #7C89A2; margin-bottom: 1rem; }
.phone__card { background: linear-gradient(135deg, var(--navy-3), var(--navy-2)); border-radius: 12px; padding: .9rem; margin-bottom: .6rem; }
.phone__card span { font-size: .62rem; color: #8E9BB4; display: block; }
.phone__card b { font-size: 1.35rem; color: #fff; font-family: Archivo, sans-serif; letter-spacing: -.03em; display: block; margin-top: .1rem; }
.phone__card i { font-style: normal; font-size: .66rem; color: var(--cyan); }
.phone__pay { background: var(--red); color: #fff; text-align: center; border-radius: 9px; padding: .65rem; font-size: .76rem; font-weight: 600; margin-top: .8rem; }
.phone__row { display: flex; gap: .5rem; margin-top: .6rem; }
.phone__row div { flex: 1; background: rgba(255,255,255,.06); border-radius: 9px; padding: .55rem; text-align: center; font-size: .58rem; color: #A9B6CC; }

/* ---------- testimonial ---------- */
.says { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.say { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; }
.say p { font-size: .96rem; color: var(--navy); margin: 0 0 1.1rem; }
.say footer { display: flex; align-items: center; gap: .7rem; }
.say__av { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: var(--cyan); display: grid; place-items: center; font-weight: 700; font-size: .88rem; }
.say__m b { display: block; font-size: .9rem; }
.say__m span { font-size: .8rem; color: var(--slate); }

/* ---------- faq ---------- */
.faq { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  padding: 1.2rem 1.4rem; cursor: pointer; font-weight: 600; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.45rem; color: var(--red); font-weight: 300; line-height: 1; }
.faq details[open] summary { color: var(--red); }
.faq details[open] summary::after { content: '\2212'; }
.faq p { padding: 0 1.4rem 1.3rem; margin: 0; color: var(--slate); font-size: .95rem; }

/* ---------- contact / footer ---------- */
.ftr { background: var(--void); color: #8E9BB4; padding: 4.5rem 0 1.8rem; }
.ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.6rem; }
.ftr .brand b { color: #fff; }
.ftr .brand span { color: var(--slate-lit); }
.ftr h4 { color: #fff; font-family: Inter, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ftr a { font-size: .93rem; }
.ftr a:hover { color: var(--cyan); }
.ftr__base {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: #6C7891;
}

.demobar {
  background: var(--navy-2); border-bottom: 1px solid rgba(59,216,245,.24);
  color: #B6C0D2; font-size: .85rem; text-align: center; padding: .55rem 1rem;
}
.demobar b { color: var(--cyan); }

.wa {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 80; width: 56px; height: 56px;
  border-radius: 50%; background: #25D366; display: grid; place-items: center;
  box-shadow: var(--sh-m); transition: transform .2s var(--ease);
}
.wa svg { width: 28px; height: 28px; fill: #fff; }
.wa:hover { transform: scale(1.07); }

/* ---------- utility ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.8rem; }
.head p { margin: .8rem 0 0; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.center .head { flex-direction: column; align-items: center; text-align: center; }

/* Reveal on scroll, one subtle rule for the whole page. */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero__in, .calc, .app, .promo__in { grid-template-columns: 1fr; }
  .plans, .says { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .hero__in { padding-top: 3rem; }
}
@media (max-width: 860px) {
  .nav, .hdr__tel { display: none; }
  .burger { display: block; }
  .nav--open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 76px; left: 0; right: 0; background: var(--paper);
    border-bottom: 1px solid var(--line); padding: .5rem 1.4rem 1.2rem; box-shadow: var(--sh-m);
  }
  .nav--open a { padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--navy); }
}
@media (max-width: 620px) {
  .shell { width: calc(100% - 2rem); }
  .ftr__grid { grid-template-columns: 1fr; }
  .head { flex-direction: column; align-items: flex-start; }
  .task { grid-template-columns: 36px 1fr; }
  .task__t { grid-column: 2; }
  .areas { grid-template-columns: 1fr 1fr; }
}