/* ============================================================
   IRON VALE — "Signal" design system
   Black ground carried by live generative imagery and one
   electric blue. Heavy condensed uppercase display type.
   ============================================================ */

:root{
  --black:#000000;
  --off:#0B0D10;
  --panel:#12161B;
  --panel-2:#181F26;
  --paper:#F7F9FB;
  --paper-2:#EDF2F6;

  --white:#FFFFFF;
  --dim:#9BA6B2;
  --ink:#0B0D10;
  --dim-ink:#5A6673;

  --blue:#1FA9E6;
  --blue-hi:#5FD0FF;
  --blue-dp:#0B6FA8;
  --blue-wash:rgba(31,169,230,.14);

  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.26);
  --line-ink:#DCE3EA;

  --dsp:'Archivo','Helvetica Neue',system-ui,sans-serif;
  --bdy:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --max:1340px;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --ease:cubic-bezier(.16,.84,.44,1);
  --hdr:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--white);
  font:400 16.5px/1.68 var(--bdy);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--dsp);font-variation-settings:'wdth' 78,'wght' 700;
  font-weight:700;text-transform:uppercase;line-height:.94;
  letter-spacing:-.005em;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.9rem,6vw,5.4rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.7rem)}
h3{font-size:clamp(1.35rem,2vw,1.75rem);font-variation-settings:'wdth' 84,'wght' 700}
h4{font-size:1.15rem;font-variation-settings:'wdth' 88,'wght' 700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.w{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.s{padding-block:clamp(4rem,7vw,6.5rem)}
.s-sm{padding-block:clamp(2.5rem,4.5vw,4rem)}
section[id]{scroll-margin-top:calc(var(--hdr) + 12px)}
.light{background:var(--paper);color:var(--ink)}
.light .lead{color:var(--dim-ink)}
.light .kick{color:var(--blue-dp)}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}

.kick{font:500 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);display:inline-block;margin-bottom:1.5rem}
.lead{color:var(--dim);font-size:1.1rem;max-width:56ch}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;
  font:500 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 1.7rem;transition:.22s var(--ease);border:1px solid transparent;cursor:pointer}
.btn-p{background:var(--blue);color:#00121D}
.btn-p:hover{background:var(--blue-hi)}
.btn-o{border-color:rgba(255,255,255,.32);color:#fff}
.btn-o:hover{border-color:var(--blue);color:var(--blue)}
.light .btn-o{border-color:var(--line-ink);color:var(--ink)}
.light .btn-o:hover{border-color:var(--blue-dp);color:var(--blue-dp)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.go{font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-dp);white-space:nowrap}

/* ---------- generated imagery ---------- */
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0A3352}
.band{position:relative;aspect-ratio:24/8;overflow:hidden;background:#0A3352;min-height:220px}
.band .ov{position:absolute;inset:auto 0 0 0;padding:clamp(1.5rem,4vw,3rem) 0;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent)}
.band .ov h2{max-width:15ch}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:absolute;inset:0 0 auto 0;z-index:60}
.hdr.fixed{position:fixed;background:rgba(0,0,0,.9);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:2.5rem;height:var(--hdr)}
/* The lockup is sized off one number so the mark and the wordmark can never
   drift apart. It fills roughly two thirds of the header bar, which is the
   proportion that makes a logo read as an anchor instead of a label. */
.nav .brand,.ftr .brand{--lk:58px;
  display:flex;align-items:center;gap:.62em;text-decoration:none;color:#fff;flex:none;
  font-size:var(--lk);border-bottom:0;padding-block:0}
.brand-mk{width:1em;height:1em;flex:none;display:block}
.brand-wm{display:flex;flex-direction:column;justify-content:center;gap:.075em}
.brand-wm b{font-family:var(--dsp);font-variation-settings:'wdth' 84,'wght' 800;
  font-size:.53em;line-height:.86;letter-spacing:.012em;text-transform:uppercase}
.brand-wm em{font-style:normal;font-family:var(--mono);font-weight:500;
  font-size:.196em;line-height:1;letter-spacing:.44em;text-transform:uppercase;
  color:var(--blue);padding-left:.12em}
.brand:hover .brand-mk{opacity:.85}
.brand-mk{transition:opacity .2s var(--ease)}
/* Footer bar is shorter than the header, so the lockup steps down with it. */
.ftr .brand{--lk:50px;margin-bottom:1.25rem}
.nav .brand:hover,.ftr .brand:hover{color:#fff}
@media (max-width:900px){.nav .brand,.ftr .brand{--lk:46px}}
@media (max-width:480px){.nav .brand,.ftr .brand{--lk:40px}}
.nav ul{list-style:none;display:flex;gap:2.1rem;margin:0 0 0 auto;padding:0}
.nav a{font:500 .74rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);transition:.2s;padding-block:.4rem;
  border-bottom:1px solid transparent}
.nav a:hover{color:var(--blue)}
.nav a.on{color:#fff;border-bottom-color:var(--blue)}

.burger{display:none;margin-left:auto;background:none;border:0;padding:.5rem;
  cursor:pointer;color:#fff}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;
  transition:.3s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{position:fixed;inset:var(--hdr) 0 0 0;background:#000;z-index:55;
  transform:translateX(100%);transition:transform .35s var(--ease);
  padding:2rem var(--pad);display:none;overflow-y:auto}
.drawer.on{transform:none}
.drawer a{display:block;padding:1.15rem 0;border-bottom:1px solid var(--line);
  font-family:var(--dsp);font-variation-settings:'wdth' 84,'wght' 700;
  font-size:1.6rem;text-transform:uppercase}
.drawer a:hover{color:var(--blue)}

/* ============================================================
   HERO
   ============================================================ */
.stage{position:relative;min-height:min(74vh,700px);display:flex;align-items:center;
  background:var(--black);overflow:hidden;
  padding-left:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)))}
.stage .field{position:absolute;inset:0;z-index:1;min-height:0}
.stage-copy{position:relative;z-index:4;display:flex;flex-direction:column;
  justify-content:center;padding:7rem var(--pad) 5rem 0;
  max-width:min(56ch,52%);text-shadow:0 1px 24px rgba(0,0,0,.75)}
.stage-copy h1{max-width:13ch;margin-bottom:1.6rem}
.stage-copy p{color:rgba(255,255,255,.74);max-width:46ch;font-size:1.08rem}
.field{position:relative}
.field::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 26%,
    rgba(0,0,0,.3) 48%,transparent 68%)}

/* interior page header */
.phead{position:relative;min-height:clamp(340px,46vh,460px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--black)}
.phead .art{opacity:.85}
.phead::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#000 12%,rgba(0,0,0,.72) 46%,rgba(0,0,0,.35) 100%)}
.phead .w{position:relative;z-index:3;padding-block:clamp(2.5rem,5vw,4rem) clamp(2.5rem,4vw,3.5rem);
  padding-top:calc(var(--hdr) + 2rem)}
/* Short, declarative headlines. The detail lives in the lead, where a
   list reads as prose instead of stacking into a wall of caps. */
.phead h1{max-width:13ch;margin-bottom:1.4rem}
.phead .lead{color:rgba(255,255,255,.82);max-width:62ch;font-size:1.14rem}
.crumb{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);margin-bottom:1.4rem}
.crumb a{color:var(--blue)}

/* ============================================================
   STANDARDS MARQUEE
   ============================================================ */
.bar{border-block:1px solid var(--line);background:var(--off);position:relative;z-index:5}
.ticker{overflow:hidden;padding-block:1.25rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.track{list-style:none;margin:0;padding:0;display:flex;width:max-content;
  animation:ivslide 46s linear infinite}
.track li{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;white-space:nowrap;
  font:500 .78rem/1.7 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.track li::after{content:'';width:5px;height:5px;flex:none;
  background:rgba(255,255,255,.28);transform:rotate(45deg)}
.track li.key{color:var(--blue-hi)}
.track li.key::after{background:var(--blue)}
.ticker:hover .track{animation-play-state:paused}
@keyframes ivslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   CAPABILITY ROWS
   ============================================================ */
.caps{border-top:1px solid var(--line-ink)}
.capr{display:grid;grid-template-columns:88px 1fr 1.25fr auto;gap:1rem 2.5rem;
  align-items:center;padding:2.2rem 0;border-bottom:1px solid var(--line-ink);
  transition:.24s var(--ease)}
.capr:hover{background:#fff;padding-inline:1.25rem}
.capr .n{font:500 .72rem/1 var(--mono);letter-spacing:.18em;color:#9AA7B4}
.capr p{margin:0;color:var(--dim-ink);font-size:.98rem}

/* ============================================================
   TILES + STACK
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3rem}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0A3352;
  display:block;transition:.3s var(--ease)}
.tile:hover{transform:translateY(-4px)}
.tile:hover .art{transform:scale(1.05)}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:1.5rem 1.35rem;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent)}
.tile .cap h3{color:#fff;font-size:1.2rem;line-height:1.05}
.tile .cap small{display:block;margin-top:.5rem;font:500 .64rem/1.5 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}

.duo{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.stack{display:grid;gap:1.25rem}
.stack a{position:relative;aspect-ratio:21/9;overflow:hidden;background:#0A3352;
  display:block;transition:.3s var(--ease)}
.stack a:hover{transform:translateX(4px)}
.stack a:hover .art{transform:scale(1.05)}
.stack a::after{content:'';position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent);z-index:1}
.stack h3{position:absolute;left:1.5rem;bottom:1.35rem;z-index:2;color:#fff;font-size:1.3rem}

/* ============================================================
   SPLIT / LISTS / CARDS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
ul.ticks{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.9rem}
ul.ticks li{display:flex;gap:1rem;font-size:1rem;color:var(--dim)}
ul.ticks li::before{content:'';flex:none;width:18px;height:2px;margin-top:.72rem;background:var(--blue)}
.light ul.ticks li{color:var(--dim-ink)}
/* A bold lead-in sits on its own line. Inline, the labels wrap at
   different points and the descriptions start at ragged x positions. */
ul.ticks li strong{display:block;color:var(--white);margin-bottom:.1rem}
.light ul.ticks li strong{color:var(--ink)}

.card{border:1px solid var(--line);background:var(--panel);padding:1.9rem;
  display:flex;flex-direction:column;height:100%;transition:.28s var(--ease)}
.card:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-3px)}
.light .card{background:#fff;border-color:var(--line-ink)}
.light .card:hover{border-color:rgba(31,169,230,.5)}
.card .lbl{font:500 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1.1rem}
.light .card .lbl{color:var(--blue-dp)}
.card h3{margin-bottom:.7rem}
.card p{font-size:.95rem;color:var(--dim);margin:0}
.light .card p{color:var(--dim-ink)}

/* statement band */
.stmt{padding-block:clamp(5rem,10vw,9rem);position:relative;overflow:hidden}
.stmt::before{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 120% at 12% 50%,rgba(31,169,230,.16),transparent 62%)}
.stmt .w{position:relative}
.stmt .rule{width:64px;height:3px;background:var(--blue);margin-bottom:2.25rem}
.stmt h2{font-size:clamp(2.6rem,6.4vw,5.6rem);max-width:15ch;line-height:.95}
.stmt h2 em{font-style:normal;color:var(--blue)}

/* accordion */
.acc{border-top:1px solid var(--line-ink)}
.acc details{border-bottom:1px solid var(--line-ink)}
.acc summary{list-style:none;cursor:pointer;padding:1.75rem 3rem 1.75rem 0;position:relative;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.5rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'';position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--blue-dp);border-bottom:2px solid var(--blue-dp);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc summary h3{flex:1;min-width:min(100%,280px)}
.acc .meta{font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#8494A3}
.acc .body{padding:0 3rem 2.25rem 0;max-width:75ch}
.acc .body p{font-size:.97rem;color:var(--dim-ink)}

/* rows (jobs, codes) */
.rows{border-top:1px solid var(--line-ink)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  padding:1.6rem 0;border-bottom:1px solid var(--line-ink);transition:.24s var(--ease)}
.row:hover{padding-left:.9rem;background:#fff}
.row h3{flex:1;min-width:min(100%,300px);font-size:1.15rem}
.chip{font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-ink);padding:.4rem .75rem;color:var(--dim-ink);border-radius:99px}
.chip.clr{border-color:rgba(31,169,230,.55);color:var(--blue-dp)}

/* people */
.person .ph{position:relative;aspect-ratio:1;overflow:hidden;background:#0A3352;margin-bottom:1.1rem}
.person h3{font-size:1.15rem;margin-bottom:.3rem}
.person .role{font:500 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.8rem}
.person p{font-size:.92rem;color:var(--dim)}

/* form */
.form{display:grid;gap:1.25rem}
.field-l{display:block;font:500 .66rem/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.6rem}
.form input,.form select,.form textarea{width:100%;padding:.95rem 1rem;
  background:var(--panel);color:#fff;border:1px solid var(--line);
  font:inherit;font-size:.95rem;transition:.2s var(--ease)}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;
  border-color:var(--blue);background:var(--panel-2);box-shadow:0 0 0 3px var(--blue-wash)}
.note{font-size:.84rem;color:var(--dim)}
.light .note{color:var(--dim-ink)}

/* ---- form status ------------------------------------------------
   Three states share one element. Plain text while sending, red text
   on failure, and a full confirmation card on success. The card is the
   only state that hides the form, because it is the only one where
   there is nothing left to correct. */
.form-result.err{color:#FF9B9B}
.light .form-result.err{color:#B3261E}

.contact.sent > *:not(.form-result){display:none}

.form-result.ok{
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
  padding:clamp(1.4rem,3vw,2rem);
  border:1px solid var(--blue);
  background:var(--blue-wash);
  border-radius:2px;
  animation:frIn .45s var(--ease) both;
}
.fr-mark{
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--blue);color:#fff;
  display:grid;place-items:center;
  font-size:1.25rem;line-height:1;margin-bottom:.25rem;
}
.fr-title{
  font-family:var(--dsp);font-variation-settings:'wdth' 84,'wght' 700;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.005em;
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  margin:0;color:var(--white);
}
.light .fr-title{color:var(--ink)}
.fr-line{font-size:.9rem;line-height:1.6;color:var(--dim);margin:0;max-width:54ch}
.light .fr-line{color:var(--dim-ink)}
.fr-again{
  margin-top:.5rem;padding:0;border:0;background:none;cursor:pointer;
  color:var(--blue);font-family:var(--mono);font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid currentColor;line-height:1.6;
}
.light .fr-again{color:var(--blue-dp)}
.fr-again:hover{color:var(--blue-hi)}
.light .fr-again:hover{color:var(--blue)}

@keyframes frIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .form-result.ok{animation:none}
}

/* placeholder marker */
.ph-tag{color:var(--blue-hi);font-family:var(--mono);font-size:.85em;
  background:var(--blue-wash);padding:.1em .45em;
  border:1px dashed rgba(31,169,230,.5);white-space:nowrap}
.light .ph-tag{color:var(--blue-dp);background:rgba(31,169,230,.1)}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:#000;border-top:1px solid var(--line);padding-block:clamp(3.5rem,6vw,5rem) 0}
.ftr-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3.5rem;border-bottom:1px solid var(--line)}
.ftr h5{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin:0 0 1.25rem}
/* Column headings are links, so they behave the way they look. */
.ftr h5 a{border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s var(--ease)}
.ftr h5 a:hover{border-bottom-color:var(--blue)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ftr ul a{font-size:.92rem;color:var(--dim)}
.ftr ul a:hover{color:#fff}
.ftr-brand p{font-size:.92rem;color:var(--dim);max-width:38ch;margin:1.4rem 0}
.ftr-ids{font:500 .75rem/2 var(--mono);color:var(--dim);
  border-left:2px solid var(--blue);padding-left:1rem}
.ftr-btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-block:1.75rem;font-size:.84rem;color:var(--dim)}
.ftr-btm nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.ftr-btm a:hover{color:var(--blue)}
.badges{display:flex;flex-wrap:wrap;gap:.75rem;padding-block:2.25rem;
  border-bottom:1px solid var(--line)}
.badge{border:1px dashed var(--line-2);padding:.7rem 1.1rem;
  font:500 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:.6rem}
.badge b{color:var(--blue);font-weight:500}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .track{animation:none;flex-wrap:wrap;width:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media(max-width:920px){
  .nav ul{display:none}
  .burger{display:block}
  .drawer{display:block}
  body.locked{overflow:hidden}
  .stage{min-height:auto;padding-left:0;display:block}
  .stage .field{position:absolute;inset:0 0 auto 0;height:340px}
  .field::after{background:linear-gradient(to bottom,transparent 0%,transparent 52%,
    rgba(0,0,0,.72) 84%,#000 100%)}
  .stage-copy{max-width:none;padding:calc(340px + 1.5rem) var(--pad) 4.5rem;
    text-shadow:none}
    .capr{grid-template-columns:1fr;gap:.55rem}
  .split,.duo{grid-template-columns:1fr}
  .g2,.g3{grid-template-columns:1fr}
  .band{aspect-ratio:16/9}
}
@media(max-width:640px){
  body{font-size:16px}
  .tiles{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr}
  .acc summary{padding-right:2.25rem}
}