/* Alvex Inc. — layout concept: a technical drawing sheet. Hairline rules, dimension
   ticks and monospaced callouts carry the structure; no photography, no stock imagery. */
:root{
  --bg:#F7F8FA; --sheet:#FFFFFF; --line:#D7DBE3; --line-soft:#E7EAEF;
  --fg:#15171C; --fg-2:#59616E; --fg-3:#858D9A;
  --accent:#B22A2E; --accent-ink:#8E1F23; --accent-wash:#FBF0F0;
  --grid:rgba(21,23,28,.055);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(18px,4vw,44px); --rule:1px solid var(--line); color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D0F14; --sheet:#141821; --line:#2A313D; --line-soft:#1E242E;
    --fg:#E9ECF2; --fg-2:#9AA4B4; --fg-3:#6E7787;
    --accent:#E36064; --accent-ink:#F08A8D; --accent-wash:#221317;
    --grid:rgba(255,255,255,.045); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D0F14; --sheet:#141821; --line:#2A313D; --line-soft:#1E242E;
  --fg:#E9ECF2; --fg-2:#9AA4B4; --fg-3:#6E7787;
  --accent:#E36064; --accent-ink:#F08A8D; --accent-wash:#221317;
  --grid:rgba(255,255,255,.045); color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;
}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.wrap{max-width:1140px; margin:0 auto; padding-inline:var(--pad)}

/* ---------- header ---------- */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:var(--rule)}
.top .wrap{display:flex; align-items:center; gap:22px; min-height:66px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; margin-right:auto}
.brand b{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.14em}
.brand span{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--fg-3);
  text-transform:uppercase}
nav{display:flex; gap:4px; flex-wrap:wrap}
nav a{font-size:13.5px; text-decoration:none; color:var(--fg-2); padding:7px 10px;
  border-radius:2px; position:relative; transition:color .18s}
nav a:hover{color:var(--fg)}
nav a[aria-current="page"]{color:var(--fg)}
nav a[aria-current="page"]::after{content:""; position:absolute; left:11px; right:11px; bottom:1px;
  height:2px; background:var(--accent)}
.callbtn{font-family:var(--mono); font-size:12.5px; text-decoration:none; color:var(--fg);
  border:var(--rule); padding:8px 13px; white-space:nowrap; transition:border-color .18s,color .18s}
.callbtn:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- page furniture ---------- */
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px}
h1,h2,h3{font-family:var(--display); font-weight:700; text-wrap:balance; margin:0;
  letter-spacing:-.018em; line-height:1.08}
h1{font-size:clamp(34px,5.6vw,60px)}
h2{font-size:clamp(25px,3.4vw,37px)}
h3{font-size:17px; letter-spacing:-.005em; line-height:1.28}
p{margin:0 0 1em; max-width:66ch}
.lede{font-size:clamp(16.5px,1.9vw,19.5px); color:var(--fg-2); line-height:1.6}
section{padding-block:clamp(52px,8vw,92px); border-top:var(--rule); position:relative}
section:first-of-type{border-top:0}
/* dimension tick on each section rule */
section::before{content:""; position:absolute; top:-1px; left:var(--pad); width:44px; height:3px;
  background:var(--accent)}
.head-2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(20px,4vw,56px);
  align-items:start; margin-bottom:clamp(28px,4vw,46px)}
@media(max-width:820px){.head-2{grid-template-columns:1fr}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(46px,7vw,84px) clamp(44px,6vw,74px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(26px,5vw,58px); align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.btn{font-family:var(--body); font-size:14.5px; font-weight:500; text-decoration:none;
  padding:13px 22px; border:1px solid var(--accent); background:var(--accent); color:#fff;
  transition:background .18s,border-color .18s}
.btn:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn.ghost{background:transparent; color:var(--fg); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--fg); background:transparent}

/* drawing panel */
.plate{background:var(--sheet); border:var(--rule); padding:clamp(16px,3vw,26px); position:relative}
.plate::after{content:""; position:absolute; inset:7px; border:1px dashed var(--line-soft);
  pointer-events:none}
.plate figcaption{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--fg-3);
  text-transform:uppercase; margin-top:14px; display:flex; justify-content:space-between; gap:12px;
  flex-wrap:wrap}
.draw{display:block; width:100%; height:auto; overflow:visible}
.draw .edge{fill:none; stroke:var(--fg); stroke-width:1.6}
.draw .cut{fill:var(--bg); stroke:var(--fg); stroke-width:1.3}
.draw .dim{fill:none; stroke:var(--accent); stroke-width:1}
.draw .ext{fill:none; stroke:var(--fg-3); stroke-width:.7; stroke-dasharray:3 3}
.draw text{font-family:var(--mono); font-size:8.5px; fill:var(--fg-2); letter-spacing:.06em}
.draw text.hot{fill:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .draw .ink{stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
    animation:ink 1.15s cubic-bezier(.65,0,.35,1) forwards}
  .draw .d1{animation-delay:.05s}.draw .d2{animation-delay:.2s}.draw .d3{animation-delay:.35s}
  .draw .d4{animation-delay:.5s}.draw .d5{animation-delay:.62s}
  .draw .fade{opacity:0; animation:fade .5s ease .95s forwards}
  @keyframes ink{to{stroke-dashoffset:0}}
  @keyframes fade{to{opacity:1}}
}

/* ---------- cards & lists ---------- */
.cards{display:grid; gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{background:var(--sheet); border:var(--rule); padding:clamp(18px,2.4vw,26px); min-width:0;
  display:flex; flex-direction:column; gap:10px; transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--fg-3)}
.card .no{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--accent)}
.card p{font-size:14.5px; color:var(--fg-2); margin:0}
.card ul{margin:2px 0 0; padding-left:17px; font-size:13.5px; color:var(--fg-2); line-height:1.75}
.card ul li::marker{color:var(--accent)}

.specs{width:100%; border-collapse:collapse; font-size:14.5px}
.specs th,.specs td{text-align:left; padding:13px 14px; border-top:1px solid var(--line-soft);
  vertical-align:top}
.specs tr:first-child th,.specs tr:first-child td{border-top:0}
.specs th{font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--fg-3); font-weight:500; width:34%; white-space:nowrap}
.specs td{color:var(--fg-2)}
.scroll{overflow-x:auto; background:var(--sheet); border:var(--rule)}

.facts{display:grid; gap:clamp(12px,1.6vw,18px); grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  margin-top:8px}
.fact{border-left:2px solid var(--accent); padding:4px 0 4px 16px}
.fact b{display:block; font-family:var(--display); font-size:clamp(21px,2.4vw,27px); line-height:1.12;
  white-space:nowrap}
.fact span{font-size:13.5px; color:var(--fg-2)}

.note{background:var(--sheet); border:var(--rule); border-left:2px solid var(--accent);
  padding:clamp(16px,2.4vw,24px); font-size:14.5px; color:var(--fg-2)}
.note strong{color:var(--fg)}

/* ---------- form ---------- */
.form{background:var(--sheet); border:var(--rule); padding:clamp(20px,3vw,32px)}
.row{display:grid; gap:16px; grid-template-columns:1fr 1fr; margin-bottom:16px}
@media(max-width:640px){.row{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3)}
.field input,.field select,.field textarea{font-family:var(--body); font-size:15px; color:var(--fg);
  background:var(--bg); border:var(--rule); padding:11px 13px; width:100%; border-radius:0}
.field textarea{min-height:128px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); outline:none}
.drop{border:1px dashed var(--line); background:var(--bg); padding:20px; text-align:center;
  font-size:14px; color:var(--fg-2); cursor:pointer; transition:border-color .18s,background .18s}
.drop:hover,.drop.over{border-color:var(--accent); background:var(--accent-wash)}
.drop b{display:block; color:var(--fg); font-weight:500; margin-bottom:3px}
.drop small{font-family:var(--mono); font-size:11px; color:var(--fg-3); letter-spacing:.05em}
#filelist{list-style:none; margin:10px 0 0; padding:0; font-family:var(--mono); font-size:12px;
  color:var(--fg-2)}
#filelist li{display:flex; justify-content:space-between; gap:12px; padding:5px 0;
  border-top:1px solid var(--line-soft)}
.formnote{font-size:12.5px; color:var(--fg-3); margin:14px 0 0}
.status{margin-top:14px; font-size:14px; padding:12px 14px; border:var(--rule);
  border-left:2px solid var(--accent); background:var(--accent-wash); color:var(--fg)}

/* ---------- footer ---------- */
footer{border-top:var(--rule); padding-block:clamp(34px,5vw,54px); font-size:14px; color:var(--fg-2)}
.foot{display:grid; gap:clamp(20px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-3); margin:0 0 12px; font-weight:500}
.foot a{color:var(--fg-2); text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot ul{list-style:none; margin:0; padding:0; line-height:2}
.rule-foot{margin-top:clamp(26px,4vw,40px); padding-top:18px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--fg-3)}
.copy{cursor:pointer; background:none; border:0; font:inherit; color:inherit; padding:0;
  text-decoration:underline; text-underline-offset:3px}
.copy:hover{color:var(--accent)}

@media(max-width:560px){
  .top .wrap{min-height:0; padding-block:11px; gap:10px}
  .brand{margin-right:0; width:100%}
  nav{gap:0; margin-right:auto}
  nav a{padding:6px 9px; font-size:13px}
  nav a[aria-current="page"]::after{left:9px; right:9px}
  .callbtn{padding:7px 10px; font-size:12px}
}

/* ===================== motion, logo and background layer ===================== */
:root.has-bg body{background-image:none}
#bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.top,main,footer{position:relative; z-index:1}

#progress{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%; z-index:60;
  transition:transform .08s linear}

/* header */
.top{transition:box-shadow .25s ease, background .25s ease}
.top .wrap{transition:min-height .25s ease}
.top.small{box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(0,0,0,.4)}
.top.small .wrap{min-height:56px}
.top.small .brand img{height:20px}
.brand img{height:25px; width:auto; display:none; transition:height .25s ease}
.brand .logo-d{display:block}
.foot-logo{height:22px; width:auto; display:none; margin-bottom:14px}
.foot-logo.logo-d{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo-d{display:none}
  :root:not([data-theme="light"]) .brand .logo-l{display:block}
  :root:not([data-theme="light"]) .foot-logo.logo-d{display:none}
  :root:not([data-theme="light"]) .foot-logo.logo-l{display:block}
}
:root[data-theme="dark"] .brand .logo-d{display:none}
:root[data-theme="dark"] .brand .logo-l{display:block}
:root[data-theme="dark"] .foot-logo.logo-d{display:none}
:root[data-theme="dark"] .foot-logo.logo-l{display:block}

/* reveal — nothing is hidden unless JS is running and motion is welcome */
.rv{transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
:root.js .rv.pre{opacity:0; transform:translateY(16px)}
:root.js .rv.pre.in{opacity:1; transform:none}
.rv.pre:nth-child(2){transition-delay:.06s}
.rv.pre:nth-child(3){transition-delay:.12s}
.rv.pre:nth-child(4){transition-delay:.18s}
.rv.pre:nth-child(5){transition-delay:.24s}
.rv.pre:nth-child(6){transition-delay:.3s}

/* section tick grows as the section arrives */
section::before{transition:width .7s cubic-bezier(.22,.61,.36,1)}
:root.js section.rv.pre::before{width:0}
:root.js section.rv.pre.in::before{width:44px}

/* cards, buttons, plate */
.card{transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease; position:relative}
.card::after{content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 40px -30px rgba(0,0,0,.55)}
.card:hover::after{transform:scaleY(1)}
.btn{transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px -16px var(--accent)}
.btn:active{transform:translateY(0)}
.btn.ghost:hover{box-shadow:none}
.plate{will-change:transform}
.callbtn{transition:border-color .18s,color .18s,transform .18s}
.callbtn:hover{transform:translateY(-1px)}
nav a::before{content:""; position:absolute; left:11px; right:11px; bottom:1px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .24s cubic-bezier(.22,.61,.36,1)}
nav a:hover::before{transform:scaleX(1)}
nav a[aria-current="page"]::before{transform:scaleX(1)}
nav a[aria-current="page"]::after{display:none}
.specs tr{transition:background .18s}
.specs tr:hover td,.specs tr:hover th{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.drop{transition:border-color .18s,background .18s,transform .18s}
.drop.filled{border-style:solid; border-color:var(--accent)}
.fact{transition:transform .22s ease}
.fact:hover{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  :root.js .rv.pre{opacity:1; transform:none}
}

/* ==========================================================================
   parts gallery — drawings by industry
   ========================================================================== */
.filters{display:flex; gap:9px; flex-wrap:wrap; margin:0 0 clamp(18px,2.4vw,26px)}
.filt{font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  padding:10px 17px; border:var(--rule); background:transparent; color:var(--fg-2);
  cursor:pointer; position:relative; overflow:hidden;
  transition:color .22s, border-color .22s, background .22s}
.filt::after{content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.filt:hover{color:var(--fg); border-color:var(--fg-3)}
.filt:hover::after{transform:scaleX(1)}
.filt[aria-pressed="true"]{background:var(--fg); border-color:var(--fg); color:var(--sheet)}
.filt[aria-pressed="true"]::after{transform:scaleX(1); background:var(--accent)}
.filt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.gallery{display:grid; gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.part{background:var(--sheet); border:var(--rule); position:relative; min-width:0;
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .28s, transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s}
.part::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .42s cubic-bezier(.2,.7,.3,1); z-index:2}
.part:hover{border-color:var(--fg-3); box-shadow:0 18px 40px -26px rgba(21,23,28,.42)}
.part:hover::before{transform:scaleY(1)}
.part .sheet{position:relative; padding:clamp(16px,2.4vw,22px) clamp(14px,2vw,20px) 6px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px}
.part .sheet::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             rgba(178,42,46,.13), transparent 70%)}
.part:hover .sheet::after{opacity:1}
.part .meta{border-top:1px solid var(--line-soft); padding:15px clamp(14px,2vw,20px) 18px;
  margin-top:auto}
.part .tag{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent)}
.part h4{font-family:var(--display); font-size:17px; margin:7px 0 6px; letter-spacing:-.01em}
.part p{font-size:13.5px; color:var(--fg-2); margin:0; line-height:1.62}
.part.hide{display:none}

@media(prefers-reduced-motion:no-preference){
  .part .draw .ink{animation:none; stroke-dashoffset:var(--len,600)}
  .part .draw .fade{animation:none; opacity:0}
  .part.in .draw .ink{animation:ink 1.1s cubic-bezier(.65,0,.35,1) forwards}
  .part.in .draw .fade{animation:fade .5s ease .9s forwards}
  .part.settle{animation:settle .46s cubic-bezier(.2,.7,.3,1) both}
  @keyframes settle{from{opacity:0; transform:translateY(14px) scale(.985)}
                    to{opacity:1; transform:none}}
}

/* pointer tilt, shared by cards and drawings */
.tiltable{transform-style:preserve-3d}
@media(prefers-reduced-motion:reduce){
  .part,.part::before,.filt,.filt::after{transition:none}
  .part.settle{animation:none}
}

/* spec tables stack on a phone rather than forcing a sideways scroll */
@media(max-width:560px){
  .specs th,.specs td{display:block; width:auto; white-space:normal}
  .specs th{padding:14px 14px 3px; border-top:1px solid var(--line-soft)}
  .specs td{padding:0 14px 14px; border-top:0}
  .specs tr:first-child th{border-top:0}
}
.head-2.wide-left{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media(max-width:820px){.head-2.wide-left{grid-template-columns:1fr}}

/* ==========================================================================
   homepage: bigger hero drawing, dark process band
   ========================================================================== */
.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero .facts{margin-top:clamp(28px,4vw,44px); padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line); grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
.hero .plate{padding:clamp(18px,3.2vw,34px)}

.band{background:#14161B; color:#E7EAF1; border-top:1px solid #23262E;
  border-bottom:1px solid #23262E}
.band .eyebrow{color:#FF7075}
.band h2{color:#FFF}
.band .lede{color:#A8AEBB}
.band-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,4vw,56px); align-items:end; margin-bottom:clamp(28px,4vw,44px)}
@media(max-width:820px){.band-head{grid-template-columns:1fr}}

.steps{list-style:none; margin:0; padding:0; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); background:#23262E;
  border:1px solid #23262E}
.steps li{background:#14161B; padding:clamp(18px,2.2vw,24px); min-width:0;
  transition:background .28s}
.steps li:hover{background:#1B1E25}
.steps .n{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:#FF7075}
.steps h3{font-family:var(--display); font-size:16.5px; color:#FFF; margin:10px 0 7px;
  letter-spacing:-.01em}
.steps p{font-size:13.5px; line-height:1.6; color:#A8AEBB; margin:0}
.band-foot{margin-top:clamp(20px,2.6vw,26px); font-size:14px; color:#A8AEBB}
.band-foot a{color:#FFF; text-decoration:none; border-bottom:1px solid #FF7075;
  padding-bottom:2px; margin-left:6px; white-space:nowrap}
.band-foot a:hover{color:#FF7075}
.gallery.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1040px){.gallery.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gallery.four{grid-template-columns:1fr}}
.part .sheet{display:flex; align-items:center; justify-content:center}
.part .sheet > .draw{flex:1 1 auto}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:880px){.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards.three{grid-template-columns:1fr}}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.cards.two{grid-template-columns:1fr}}