/* ==========================================================================
   Anupam Anand — studio site
   Dark ground, one hot accent, numbered sections, long asymmetric scroll.
   Tokens first; nothing below hard-codes a colour.
   ========================================================================== */

:root{
  /* Neutrals carry a warm bias toward the accent so they read as chosen
     rather than inherited. */
  --ink:      #0b0b0c;
  --ink-2:    #131315;
  --ink-3:    #1a1a1d;
  --line:     #242428;
  --line-2:   #2f2f35;
  --text:     #efedea;
  --dim:      #9b9791;
  --faint:    #6b6862;
  --paper:    #f2efe9;
  --paper-2:  #e4e0d7;

  /* hero panel: base stops and the five drifting blobs */
  --p1:#062f36; --p2:#0b7c7a; --p3:#0e2360; --p4:#3b2f9a; --p5:#2a1d52; --p6:#7a2f3a; --p7:#b0521c;
  --b1:#19c9b0; --b2:#3a63ff; --b3:#9a68ff; --b4:#ef5f30; --b5:#e8a838;
  --panel-text:#fff; --panel-shadow:rgba(0,0,0,.18);
  --sc-bg:rgba(8,8,10,.52); --sc-line:rgba(255,255,255,.12); --sc-text:#fff; --sc-dim:rgba(255,255,255,.7);
  --cta-bg:   var(--paper); --cta-text:#141210; --cta-dim:#57514a; --cta-eyebrow:#8a8279; --cta-rule:#c9c2b6;
  --flame:    #ff5a1f;
  --flame-lo: #ff8a54;
  --flame-dk: #d8410c;

  --display:'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --h1-size:clamp(58px, 8.9vw, 156px); --h1-weight:800; --h1-track:-.05em;
  --h2-weight:800; --h3-weight:700; --thin-weight:300; --thin-style:italic;
  --body-weight:400; --lede-weight:400; --label-weight:500; --label-stretch:100%;
  --panel-size:clamp(30px, 4.2vw, 58px);

  --pad: 3vw;                /* the page inset: 3% of the viewport, everywhere */
  --gutter: clamp(28px, 4vw, 56px);
  --bay: clamp(84px, 11vw, 152px);   /* space between major sections */
  --max: none;               /* full-bleed: the inset is the only margin */

  --ease: cubic-bezier(.2,.8,.2,1);
}



/* ---------- light mode ----------
   Same roles, re-pointed. Neutrals stay warm so the orange still belongs.
   The CTA inverts: a dark card on the light page. Glass over imagery keeps
   its own colours because it sits on the picture, not on the page. */
html[data-theme="light"]{
  --ink:#f4f2ee; --ink-2:#ffffff; --ink-3:#ece8e1;
  --line:#e3ded5; --line-2:#cfc8bc;
  --text:#141210; --dim:#5c574f; --faint:#8a847a;
  --paper:#141210; --paper-2:#1f1c19;
  --cta-text:#efedea; --cta-dim:#a2aab4; --cta-eyebrow:#8a847a; --cta-rule:#3a3733;
  --flame-lo:#e04c14;
  /* the panel goes high-key: pastel stops, blobs that screen toward white */
  --p1:#9ee8e0; --p2:#7fd8d0; --p3:#8fa8ff; --p4:#b9a6ff; --p5:#d9c3ff; --p6:#ffb8a3; --p7:#ffd58f;
  --b1:#c8fff6; --b2:#b8cbff; --b3:#ead4ff; --b4:#ffd0bd; --b5:#fff0b8;
  --panel-text:#141210; --panel-shadow:rgba(255,255,255,.35);
  --sc-bg:rgba(255,255,255,.58); --sc-line:rgba(255,255,255,.7); --sc-text:#141210; --sc-dim:#5c574f;
}
html{ color-scheme:dark }
html[data-theme="light"]{ color-scheme:light }

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

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17px; font-weight:var(--body-weight);
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid var(--flame); outline-offset:3px; border-radius:2px }

.shell{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
section{ position:relative }

/* ---------- type scale ---------- */
h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:var(--h2-weight); letter-spacing:-.04em; line-height:.98; text-wrap:balance; font-optical-sizing:auto }
h1{ font-size:clamp(52px, 11.5vw, 148px) }
h2{ font-size:clamp(38px, 6.4vw, 82px); font-weight:var(--h2-weight) }
h3{ font-size:clamp(23px, 2.5vw, 34px); letter-spacing:-.02em; line-height:1.1; font-weight:var(--h3-weight) }
h4{ font-size:19px; font-weight:640; letter-spacing:-.01em; line-height:1.25 }
p{ margin:0 }
.lede{ font-size:clamp(17px, 1.5vw, 21px); color:var(--dim); max-width:60ch; line-height:1.62; font-weight:var(--lede-weight) }
.small{ font-size:14.5px; color:var(--dim); line-height:1.6; font-weight:420 }

/* The label that sits above every section title. */
.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:11.5px; font-weight:var(--label-weight); font-stretch:var(--label-stretch);
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--line-2) }
.eyebrow .num{ color:var(--flame) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:15px; font-weight:640; letter-spacing:-.005em;
  padding:15px 26px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:background .22s var(--ease), color .22s var(--ease),
    border-color .22s var(--ease), transform .22s var(--ease);
}
.btn .arw{ transition:transform .28s var(--ease); font-size:1.1em; line-height:1 }
.btn:hover .arw{ transform:translateX(4px) }
.btn-flame{ background:var(--flame); color:#160800 }
.btn-flame:hover{ background:var(--flame-lo) }
.btn-ghost{ border-color:var(--line-2); color:var(--text) }
.btn-ghost:hover{ border-color:var(--flame); color:var(--flame) }
.btn-paper{ background:var(--ink); color:var(--text) }
.btn-paper:hover{ background:var(--ink-3) }

/* ==========================================================================
   nav — a mark on the left, a menu on the right, nothing between them
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; padding-block:16px;
  background:color-mix(in srgb, var(--ink) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:20px }
.brand{ display:inline-flex; align-items:center; color:var(--flame); transition:color .2s var(--ease) }
.brand:hover{ color:var(--flame-lo) }
.brand svg{ width:34px; height:34px; display:block }
.nav-links{ display:none }
.nav-actions{ display:flex; align-items:center; gap:6px }
.theme{ background:none; border:0; color:var(--text); width:42px; height:42px; border-radius:50%;
        display:grid; place-items:center; cursor:pointer; font-size:22px; line-height:1;
        transition:background .2s var(--ease), color .2s var(--ease) }
.theme:hover{ background:var(--ink-3); color:var(--flame) }
.theme .ph-moon{ display:none }
html[data-theme="light"] .theme .ph-sun{ display:none }
html[data-theme="light"] .theme .ph-moon{ display:block }
.burger{ background:none; border:0; color:var(--text); padding:10px; cursor:pointer;
         display:grid; gap:7px; justify-items:end }
.burger span{ display:block; height:2px; width:26px; background:currentColor; border-radius:2px;
              transition:width .25s var(--ease), transform .25s var(--ease) }
.burger span:last-child{ width:16px }
body.menu-open .burger span:last-child{ width:26px }
body.menu-open .nav-links{
  display:grid; gap:2px; position:absolute; left:0; right:0; top:100%;
  background:var(--ink); border-bottom:1px solid var(--line);
  padding:14px var(--pad) 22px; font-size:19px; color:var(--dim);
}
body.menu-open .nav-links a{ padding-block:11px; border-bottom:1px solid var(--line) }
body.menu-open .nav-links a:hover{ color:var(--text) }

/* ==========================================================================
   hero — the headline row, then the panel
   ========================================================================== */
.hero{ padding-top:clamp(112px, 15vh, 150px); padding-bottom:clamp(40px,5vw,64px) }

.hero-top{ display:grid; gap:24px var(--gutter); align-items:end; margin-bottom:22px }
.hero-top h1{
  font-weight:var(--h1-weight); font-size:var(--h1-size); letter-spacing:var(--h1-track); line-height:.9;
  white-space:nowrap; min-width:0;
}
.hero-top h1 .us{ display:inline-block; color:var(--text); transform:translateY(-.06em) }
/* The light word beside the heavy one: the whole reason the line has two. */
.hero-top h1 .thin{ font-weight:var(--thin-weight); font-style:var(--thin-style); letter-spacing:-.02em }

.founder{
  display:flex; gap:14px; align-items:center; padding:10px;
  border:1px solid var(--line); border-radius:16px; background:var(--ink-2);
  justify-self:start;
}
.founder-ph{ width:112px; height:112px; border-radius:11px; flex:0 0 auto; object-fit:cover; display:block;
  background:var(--ink-3) }
.founder-body{ display:grid; gap:3px; padding-right:14px; align-content:center }
.founder-body strong{ font-size:16.5px; letter-spacing:-.01em; white-space:nowrap; font-weight:640 }
.founder-body .small{ white-space:nowrap }
.btn-mini{ white-space:nowrap }
.btn-mini{ margin-top:8px; padding:9px 14px; font-size:13px; background:var(--ink-3);
           border-color:var(--line-2); color:var(--text) }
.btn-mini:hover{ background:var(--flame); color:#160800; border-color:var(--flame) }

/* ---------- the panel ---------- */
.panel{
  position:relative; isolation:isolate; overflow:hidden;
  width:100%; border-radius:28px; min-height:min(470px, 52vh);
  padding:clamp(24px,4vw,44px);
  display:grid; grid-template-rows:1fr auto; gap:26px;
  /*
    The ground itself moves: a gradient three times the panel's size, its
    position swept back and forth. background-position animates in every
    browser with no filters, no blending and no compositor tricks in the way,
    so this is the movement that can't be switched off by a rendering quirk.
  */
  background-image:linear-gradient(115deg,
    var(--p1) 0%, var(--p2) 16%, var(--p3) 36%, var(--p4) 50%, var(--p5) 62%, var(--p6) 78%, var(--p7) 92%, var(--p1) 100%);
  background-size:320% 320%;
  animation:sweep 7s ease-in-out infinite alternate;
}
@keyframes sweep{
  0%  { background-position:0% 0% }
  50% { background-position:100% 50% }
  100%{ background-position:0% 100% }
}

/* Soft colour masses on top, each blurred on its own and drifting on its own
   clock, for depth the flat sweep can't give. No filter on the parent, no
   blend mode: Safari paints those once and stops. */
/* Pointer response: JS eases --ax/--ay (aurora shift), --gx/--gy (light
   position) and --gs (light strength) every frame. All of it is transform
   and opacity, so it stays on the compositor and never repaints the panel. */
.aurora{ position:absolute; inset:-20%; z-index:-1; pointer-events:none;
         transform:translate(var(--ax,0px), var(--ay,0px)); will-change:transform }
.glow{
  position:absolute; left:0; top:0; z-index:-1; pointer-events:none;
  width:760px; height:760px; border-radius:50%; filter:blur(70px);
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(140,190,255,.35) 32%, rgba(255,110,60,.18) 58%, transparent 72%);
  mix-blend-mode:screen; opacity:var(--gs,0);
  transform:translate(calc(var(--gx,50%) - 50%), calc(var(--gy,50%) - 50%)) scale(var(--gk,.9));
  will-change:transform,opacity;
}
.blob{ position:absolute; border-radius:50%; filter:blur(48px); will-change:transform }
.b1{ width:58%; height:78%; left:-6%;  top:-4%;  opacity:.75; background:radial-gradient(circle,var(--b1),transparent 62%);
     animation:drift-a 5.5s ease-in-out infinite alternate }
.b2{ width:62%; height:82%; left:18%;  top:8%;   opacity:.8;  background:radial-gradient(circle,var(--b2),transparent 62%);
     animation:drift-b 7s ease-in-out infinite alternate }
.b3{ width:54%; height:72%; left:44%;  top:0%;   opacity:.65; background:radial-gradient(circle,var(--b3),transparent 60%);
     animation:drift-c 6s ease-in-out infinite alternate }
.b4{ width:56%; height:76%; left:62%;  top:30%;  opacity:.6;  background:radial-gradient(circle,var(--b4),transparent 62%);
     animation:drift-d 7.5s ease-in-out infinite alternate }
.b5{ width:44%; height:62%; left:72%;  top:-8%;  opacity:.35; background:radial-gradient(circle,var(--b5),transparent 62%);
     animation:drift-e 4.5s ease-in-out infinite alternate }
@keyframes drift-a{ to{ transform:translate(34%, 28%) scale(1.3) } }
@keyframes drift-b{ to{ transform:translate(-28%, 34%) scale(1.2) } }
@keyframes drift-c{ to{ transform:translate(-34%, 26%) scale(1.35) } }
@keyframes drift-d{ to{ transform:translate(-30%,-36%) scale(1.22) } }
@keyframes drift-e{ to{ transform:translate(-22%, 40%) scale(1.3) } }

/* Reduced motion slows the colour rather than freezing it: a gentle drift is
   the point of the panel, and at this pace it triggers nothing. */
@media (prefers-reduced-motion:reduce){
  .panel{ animation-duration:40s }
  .blob{ animation-duration:32s }
}

.panel-title{
  align-self:end; color:var(--panel-text); font-weight:760; letter-spacing:-.03em; line-height:1.02;
  font-size:var(--panel-size); max-width:19ch;
  text-shadow:0 2px 24px var(--panel-shadow);
}

.svc-cards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(192px,1fr)); align-self:end }
.sc{
  display:flex; align-items:center; gap:12px; padding:10px; min-width:0; border-radius:12px;
  background:var(--sc-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--sc-line); color:var(--sc-text);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.sc:hover{ filter:brightness(1.08); transform:translateY(-3px) }
.sc .thumb{ width:70px; height:66px; border-radius:8px; flex:0 0 auto; overflow:hidden;
  background:linear-gradient(140deg, color-mix(in srgb,var(--sc) 70%,#000), var(--sc)) }
.sc .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.sc > span:last-child{ display:grid; gap:6px }
.sc em{ font-style:normal; font-family:var(--mono); font-size:12.5px; color:var(--sc-dim); font-weight:500; font-stretch:120% }
.sc b{ font-size:15.5px; letter-spacing:-.01em; white-space:nowrap; font-weight:620 }

/* ---------- breakpoints for the hero ---------- */
@media (min-width:880px){
  .hero-top{ grid-template-columns:minmax(0,1fr) auto }
  .founder{ justify-self:end }
}

@media (max-width:880px){
  .hero-top h1{ white-space:normal; font-size:clamp(52px, 15vw, 120px) }
  .panel{ grid-template-rows:1fr auto auto; min-height:0 }
}
@media (max-width:640px){
  .svc-cards{ grid-template-columns:1fr 1fr }
  .sc .thumb{ width:56px; height:52px }
  .founder-ph{ width:84px; height:84px }
}

/* ---------- marquee ---------- */
.marquee{ border-block:1px solid var(--line); padding-block:20px; overflow:hidden;
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.marquee-track{ display:flex; gap:52px; width:max-content; animation:slide 34s linear infinite }
.marquee span{ font-family:var(--display); font-size:clamp(20px,2.4vw,30px); font-weight:800; font-stretch:78%;
               letter-spacing:-.02em; color:var(--faint); white-space:nowrap;
               display:flex; align-items:center; gap:52px }
.marquee span::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--flame); opacity:.65 }
@keyframes slide{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none } }

/* ==========================================================================
   section furniture
   ========================================================================== */
.bay{ padding-block:var(--bay) }
.head{ display:grid; gap:20px; margin-bottom:clamp(44px,5vw,72px) }
.head .row{ display:grid; gap:var(--gutter); align-items:end; grid-template-columns:1fr }

/* ---------- stats ---------- */
.stats{ display:grid; gap:var(--gutter); grid-template-columns:repeat(2,1fr) }
.stat{ display:grid; gap:6px; padding-top:22px; border-top:1px solid var(--line-2) }
.stat .fig{ font-family:var(--display); font-size:clamp(40px,5.6vw,68px); font-weight:960; font-stretch:92%;
            letter-spacing:-.045em; line-height:1; color:var(--text);
            font-variant-numeric:tabular-nums }
.stat .fig em{ color:var(--flame); font-style:normal }
.stat .cap{ font-size:14px; color:var(--dim) }
.slot{ color:var(--faint); border-bottom:1px dashed var(--line-2) }

/* ---------- work ---------- */
/* Every card the same size, one per row: a picture, a glass bar along the
   foot, and a badge that rides the cursor while the pointer is over it. */
.projects{ display:grid; gap:26px }
.proj{
  position:relative; display:block; overflow:hidden; border-radius:22px; scroll-margin-top:88px;
  aspect-ratio:2.3 / 1; cursor:pointer; isolation:isolate;
  background:var(--ink-2);
}
.proj .shot{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(80% 90% at 70% 40%, color-mix(in srgb,var(--pc) 85%,#fff 0%), transparent 70%),
    linear-gradient(100deg, var(--pc2), var(--pc) 55%, color-mix(in srgb,var(--pc) 60%,#000));
  transition:transform .9s var(--ease);
}
.proj:hover .shot{ transform:scale(1.03) }
.proj .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.proj .glyph{ font-size:clamp(60px,9vw,130px); color:rgba(255,255,255,.14); user-select:none }

/* Vertical slats that sweep across the picture on hover: the reveal reads as
   the image resolving under the pointer. */
.proj .stripes{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 6%, transparent 6% 8%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 60%);
  mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 60%);
  opacity:.55; transform:translateX(-12%);
  transition:transform 1.1s var(--ease), opacity .6s var(--ease);
}
.proj:hover .stripes{ transform:translateX(0); opacity:.35 }

.proj-bar{
  position:absolute; left:clamp(16px,3vw,40px); right:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,40px);
  display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  padding:clamp(14px,2vw,22px) clamp(18px,2.4vw,30px);
  border-radius:12px; color:#fff;
  background:rgba(14,10,8,.62); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.proj-bar em{ font-style:normal; font-family:var(--mono); font-size:clamp(12px,1.1vw,15px); font-weight:520; font-stretch:120%;
              color:rgba(255,255,255,.72); align-self:flex-start }
.proj-bar b{ font-family:var(--display); font-weight:880; letter-spacing:-.035em; line-height:1;
             font-size:clamp(28px,4.2vw,58px); white-space:nowrap }
.proj-bar .rule{ flex:1; height:1.5px; background:rgba(255,255,255,.82); min-width:24px }
.proj-bar .tags{ font-weight:600; font-stretch:104%; font-size:clamp(13px,1.3vw,19px); white-space:nowrap; letter-spacing:-.005em }

/* The badge: a starburst seal that follows the pointer. JS writes --x/--y.
   The outer box only translates; the spin lives on an inner layer, because a
   rotate on the same element as the translate would turn the translation
   vector with it and swing the badge around the card's corner. */
.badge{
  position:absolute; left:0; top:0; z-index:3; pointer-events:none;
  width:112px; height:112px; display:grid; place-items:center;
  transform:translate(calc(var(--x, -200px) - 50%), calc(var(--y, -200px) - 50%)) scale(var(--s, 0));
  transition:scale .18s var(--ease);   /* only the pop, never the position */
}
.badge .seal{ position:absolute; inset:0; animation:seal-turn 14s linear infinite }
.badge .seal svg{ width:100%; height:100%; display:block }
.badge .arrow{ position:relative; color:var(--flame); font-size:38px; line-height:1; transform:translateX(3px) }
@keyframes seal-turn{ to{ transform:rotate(360deg) } }
.proj.is-hover .badge{ --s:1 }

@media (hover:none){
  .badge{ display:none }
}
@media (max-width:720px){
  .proj{ aspect-ratio:4/3; border-radius:16px }
  .proj-bar{ flex-wrap:wrap; gap:10px 14px }
  .proj-bar .rule{ display:none }
  .proj-bar .tags{ width:100%; white-space:normal; font-size:13px; opacity:.85 }
}
@media (prefers-reduced-motion:reduce){
  .badge .seal{ animation:none }
  .proj .stripes,.proj .shot{ transition:none }
}

/* ---------- cta + footer ---------- */
.cta{ background:var(--cta-bg); color:var(--cta-text); border-radius:26px; padding:clamp(38px,6vw,80px);
      display:grid; gap:26px; justify-items:start }
.cta h2{ color:var(--cta-text) }
.cta .lede{ color:var(--cta-dim) }
.cta .eyebrow{ color:var(--cta-eyebrow) }
.cta .eyebrow::before{ background:var(--cta-rule) }

.foot{ border-top:1px solid var(--line); margin-top:var(--bay); padding-block:56px 34px }
.foot-grid{ display:grid; gap:var(--gutter); grid-template-columns:1fr }
.foot h4{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em;
          text-transform:uppercase; color:var(--faint); margin-bottom:16px }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15px; color:var(--dim) }
.foot ul a:hover{ color:var(--flame) }
.foot-base{ display:flex; flex-wrap:wrap; gap:16px; align-items:center;
            margin-top:48px; padding-top:26px; border-top:1px solid var(--line);
            font-size:13.5px; color:var(--faint) }
.foot-base .right{ margin-left:auto; display:flex; gap:20px }

/* ==========================================================================
   scroll reveal — starts from a VISIBLE resting state, so the page reads
   with JS off, with motion reduced, and in a screenshot.
   ========================================================================== */
.rise{ opacity:1; transform:none }
html.js .rise{ opacity:0; transform:translateY(18px);
               transition:opacity .7s var(--ease), transform .7s var(--ease) }
html.js .rise.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  html.js .rise{ opacity:1 !important; transform:none !important; transition:none }
}

/* ==========================================================================
   breakpoints
   ========================================================================== */
@media (min-width:720px){
  .head .row{ grid-template-columns:1.25fr 1fr }
  .foot-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr }
  .stats{ grid-template-columns:repeat(4,1fr) }
}
@media (min-width:1000px){
}
@media (max-width:719px){
}