/* Animesh Verma portfolio. Ported from prototype v4.3.
   The page reads fine with no JavaScript. html.js means scripts are running;
   html[data-tier] (high / medium / low / static) says how much visual work this device gets. */

/* ---------- fonts (self-hosted, Latin only, text shows at once in a fallback font while these load) ---------- */
@font-face { font-family:'JetBrains Mono'; src:url(../fonts/jetbrains-mono.woff2) format('woff2'); font-weight:400 500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url(../fonts/space-grotesk.woff2) format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Unbounded'; src:url(../fonts/unbounded-800.woff2) format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Anybody'; src:url(../fonts/anybody-800-wdth.woff2) format('woff2'); font-weight:800; font-stretch:50% 150%; font-display:swap; }

:root { --bg:#050505; --ink:#e9e9ec; --dim:rgba(233,233,236,.55); --line:rgba(255,255,255,.18); --violet:#6b4bff; --violet2:#9d86ff; --red:#ff2a2a;
        --ease:cubic-bezier(.7,0,.2,1); --gut:clamp(16px,2.4vw,40px); color-scheme:dark; }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { background:var(--bg); color:var(--ink); font-family:'Space Grotesk',sans-serif; overflow-x:hidden; }
body.locked { overflow:hidden; }
html.cursor-custom, html.cursor-custom a, html.cursor-custom button { cursor:none; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
h1, h2, h3 { font:inherit; }
.mono { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.lk { text-transform:none; border-bottom:1px solid rgba(255,255,255,.35); }
.dim { color:var(--dim); }
.vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:2px solid var(--violet2); outline-offset:3px; }
.chrome { background:linear-gradient(100deg,#2a2170 0%,#eef0ff 14%,#6b4bff 27%,#3a2f99 39%,#d4daff 52%,#7a5cff 64%,#f6f7ff 77%,#4a3bb0 90%,#eef0ff 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:chrome 7s ease-in-out infinite alternate; }
@keyframes chrome { to { background-position:100% 0; } }

.grain { position:fixed; inset:-50%; pointer-events:none; opacity:.11; mix-blend-mode:overlay; z-index:90;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .6s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} }

/* ---------- custom cursor: only exists when JS turns it on (mouse devices, high/medium tier) ---------- */
#cur, #ring { position:fixed; left:0; top:0; pointer-events:none; z-index:100; mix-blend-mode:difference; display:none; }
html.cursor-custom #cur, html.cursor-custom #ring { display:block; }
#cur { width:6px; height:6px; background:#fff; border-radius:50%; margin:-3px 0 0 -3px; }
#ring { width:36px; height:36px; margin:-18px 0 0 -18px; border:1px solid #fff; transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), border-radius .35s var(--ease); }
#ring.big { width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; }
#ring span { position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); white-space:nowrap; color:#fff; font:500 10px 'JetBrains Mono',monospace; letter-spacing:.08em; }

#prog { position:fixed; top:0; left:0; height:2px; width:100%; background:var(--violet); transform-origin:left; transform:scaleX(0); z-index:80; }
header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:20px var(--gut); z-index:70; mix-blend-mode:difference; }
header nav a { margin-left:22px; }

/* ---------- loader: only when JS runs, never on the static tier ---------- */
#loader { display:none; }
html.js #loader { display:block; position:fixed; inset:0; background:#000; z-index:95; transition:clip-path 1.1s var(--ease); clip-path:inset(0 0 0 0); }
html.js #loader.done { clip-path:inset(0 0 100% 0); pointer-events:none; }
html[data-tier="static"] #loader { display:none; }
#scanbox { position:absolute; left:50%; top:50%; height:min(76vh,120vw); aspect-ratio:736/911; transform:translate(-50%,-50%); }
#scanbox .raw, #scanbox .xr { position:absolute; inset:0; background:url(../media/deity-600.webp) center/cover;
  background-image:image-set(url(../media/deity-600.avif) type('image/avif'), url(../media/deity-600.webp) type('image/webp')); }
#scanbox .raw { filter:invert(1) grayscale(1) sepia(.28) contrast(1.05) brightness(.6); }
#scanbox .xr  { filter:grayscale(.2) contrast(1.25) brightness(1.08); clip-path:inset(0 0 calc(100% - var(--s,0%)) 0); }
#scanbox .xr::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 60%, rgba(107,75,255,.18)); mix-blend-mode:screen; }
#scanline { position:absolute; left:-14%; right:-14%; top:var(--s,0%); height:2px; background:#fff; box-shadow:0 0 22px 5px rgba(150,130,255,.9); }
#scanline span { position:absolute; right:0; top:-18px; color:#fff; white-space:nowrap; }
#scanbox .brk { position:absolute; width:26px; height:26px; border:1px solid rgba(255,255,255,.8); }
#scanbox .b1 { left:-12px; top:-12px; border-right:0; border-bottom:0; } #scanbox .b2 { right:-12px; top:-12px; border-left:0; border-bottom:0; }
#scanbox .b3 { left:-12px; bottom:-12px; border-right:0; border-top:0; } #scanbox .b4 { right:-12px; bottom:-12px; border-left:0; border-top:0; }
.lock { position:absolute; width:9%; aspect-ratio:1; transform:translate(-50%,-50%) scale(1.8); border:1px solid #fff; opacity:0; transition:all .45s var(--ease); }
.lock.on { opacity:1; transform:translate(-50%,-50%) scale(1); }
.lock::before { content:'×'; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); color:var(--red); font:500 13px 'JetBrains Mono',monospace; }
.lock::after { content:attr(data-c); position:absolute; left:0; top:-15px; color:#fff; white-space:nowrap; font:400 9px 'JetBrains Mono',monospace; letter-spacing:.06em; }
#loader .hud { position:absolute; z-index:3; }
#lhint { left:var(--gut); bottom:var(--gut); line-height:1.8; }
#lpct { right:var(--gut); bottom:var(--gut); text-align:right; line-height:1.8; }
#lskip { right:var(--gut); top:var(--gut); }
#lskip button { background:none; border:0; color:var(--dim); font:inherit; letter-spacing:inherit; text-transform:inherit; }

/* ---------- motion language: scan reveal (only hides things when JS is there to reveal them) ---------- */
.rv { position:relative; }
html.js .rv { clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease); }
.rv::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; background:#fff; box-shadow:0 0 14px 3px rgba(150,130,255,.8); opacity:0; z-index:5; pointer-events:none; }
html.js .rv.in { clip-path:inset(0 0 0 0); }
.rv.in::after { animation:scanline 1.2s var(--ease) forwards; }
@keyframes scanline { 0%{top:0;opacity:1} 92%{opacity:1} 100%{top:100%;opacity:0} }

/* ---------- background-stage pattern ---------- */
section { position:relative; }
.stage { position:absolute; inset:0; z-index:0; }
.stage .pin { position:sticky; top:0; height:100vh; overflow:hidden; }
.front { position:relative; }   /* no z-index on purpose: the title video blends with the background behind it */
.glass { background:rgba(5,5,8,.42); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.still img, .still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- 01 opening: background video and text layer share one 16:9 box that covers the screen ---------- */
#s1 { height:100vh; overflow:hidden; background:#000; }
#s1 .frame16x9 { position:absolute; left:50%; top:50%; width:max(100vw,177.78vh); height:max(100vh,56.25vw); transform:translate(-50%,-50%); will-change:transform; }
#s1 .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* where the text sits in the original 1920×1080 frame: x 96, y 390, 1744×552 → centre at 50.4% / 61.67%.
   On screens narrower than 16:9 the cover crop would cut the word off, so it shrinks to fit 92% of the screen width,
   staying centred on the same spot. */
#s1 #c1t, #s1 .chrome-still { position:absolute; left:50.42%; top:61.667%; width:min(90.833%, 92vw); height:auto; aspect-ratio:1744/552;
  translate:-50% -50%; display:block; pointer-events:none; }
#s1 .chrome-still img { width:100%; height:100%; display:block; }
#s1 #c1t { display:none; }
html[data-tier="high"] #s1.text-live #c1t, html[data-tier="medium"] #s1.text-live #c1t { display:block; }
#s1.text-live .chrome-still { visibility:hidden; }
html[data-tier="low"] #s1 .chrome-still { animation:fadeup .8s var(--ease) both; }
@keyframes fadeup { from { opacity:0; transform:translateY(4%); } to { opacity:1; transform:none; } }
/* the X-ray lens inverts whatever is behind it; it sits under the text so the chrome isn't inverted */
.lens { display:none; position:absolute; left:0; top:0; width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%; pointer-events:none;
  -webkit-backdrop-filter:invert(1) contrast(1.4) brightness(1.05); backdrop-filter:invert(1) contrast(1.4) brightness(1.05);
  box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 0 40px rgba(107,75,255,.35); }
html[data-tier="high"] .lens, html[data-tier="medium"] .lens { display:block; }
#s1 h1 { position:absolute; z-index:3; left:var(--gut); bottom:var(--gut); line-height:1.8; }
#s1 h1 span { display:block; }
#s1 .scroll { position:absolute; z-index:3; left:50%; bottom:var(--gut); transform:translateX(-50%); text-align:center; }
#s1 .scroll::after { content:''; display:block; width:1px; height:34px; background:#fff; margin:8px auto 0; animation:drop 1.6s ease-in-out infinite; transform-origin:top; }
@keyframes drop { 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- 02 who ---------- */
#s2 .vstage { position:relative; height:100vh; overflow:hidden; background:#000; }
#s2 .vstage video { position:absolute; inset:-6% 0; width:100%; height:112%; object-fit:cover; will-change:transform; }
#s2 .vstage .shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 35%); }
#tools { position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:4; }
#tools .cap { position:absolute; right:var(--gut); top:-6px; display:flex; flex-direction:column; align-items:flex-end; gap:4px; opacity:0; transition:opacity .6s; }
#tools .cap.on { opacity:1; }
#tools .cap span { background:rgba(0,0,0,.72); padding:4px 7px; }
#tools canvas { height:min(78vh,660px); aspect-ratio:.44; display:none; }
html[data-tier="high"] #tools canvas, html[data-tier="medium"] #tools canvas { display:block; }
html[data-tier="high"] .toolcards, html[data-tier="medium"] .toolcards { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#s2.gl-lost #tools canvas { display:none; }   /* the 3D tiles lost their graphics (e.g. iPhone after switching apps): */
#s2.gl-lost .toolcards { position:static; width:auto; height:auto; overflow:visible; clip:auto; }   /* show the plain cards */
/* tool cards: the no-3D version (and what screen readers read) */
.toolcards { display:flex; flex-direction:column; gap:10px; padding-right:var(--gut); }
.toolcards li { display:grid; grid-template-columns:44px 1fr; column-gap:12px; align-items:center; width:min(240px,62vw); padding:10px 12px;
  background:rgba(5,5,8,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28); }
.toolcards b { grid-row:span 2; font:800 22px 'Unbounded',sans-serif; color:var(--violet2); text-align:center; }
.toolcards span { font:500 12px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.toolcards em { font:400 12px 'Space Grotesk',sans-serif; font-style:normal; color:var(--dim); }
html.js .toolcards li { transition:transform .7s var(--ease), opacity .7s; }
html.js .toolcards.away li { transform:translateX(120%); opacity:0; }
html.js .toolcards li:nth-child(2) { transition-delay:.18s; } html.js .toolcards li:nth-child(3) { transition-delay:.36s; } html.js .toolcards li:nth-child(4) { transition-delay:.54s; }
#toolTab { position:absolute; right:0; top:50%; transform:translate(100%,-50%); transition:transform .6s var(--ease); writing-mode:vertical-rl;
  background:rgba(5,5,8,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; border:1px solid rgba(255,255,255,.35); border-right:0; padding:16px 8px; font:500 10px 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
#toolTab span { color:var(--violet2); }
#toolTab.on { transform:translate(0,-50%); }
#toolTab:hover { background:#fff; color:#000; }
#tip { position:absolute; transform:translate(-100%,-50%); pointer-events:none; opacity:0; transition:opacity .2s; background:#000; border:1px solid rgba(255,255,255,.7); padding:6px 9px; white-space:nowrap; line-height:1.6; z-index:5; }
#tip b { color:var(--violet2); font-weight:500; }
.strip { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut); padding:28px var(--gut); border-bottom:1px solid var(--line); background:#050505; position:relative; z-index:2; }
.strip > div { border-left:1px solid var(--line); padding-left:14px; line-height:2; }

/* ---------- 03 motion graphics ---------- */
#s3 { padding:18vh 0 22vh; }
#s3 .pin { background:#000; }
#s3 .blurfill { position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; filter:blur(40px) grayscale(1) brightness(.35); }
html[data-tier="medium"] #s3 .blurfill, html[data-tier="low"] #s3 .blurfill, html[data-tier="static"] #s3 .blurfill { display:none; }
#s3 .sharp { position:absolute; left:50%; top:0; height:100%; aspect-ratio:9/16; transform:translateX(-50%); object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(.75);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); }
.torch { position:absolute; inset:0; background:radial-gradient(circle 26vmax at var(--x,50%) var(--y,50%), rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.78) 100%); pointer-events:none; }
.bglabel { position:absolute; z-index:3; left:var(--gut); bottom:var(--gut); }
.tagsband { width:100%; aspect-ratio:1920/360; position:relative; mix-blend-mode:screen; }   /* black becomes see-through, white type floats on the runner */
.tagsband video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- 04 reels ---------- */
#s4 { padding:22vh 0 40vh; }
#s4 .pin { background:#000; }
#s4 canvas, #s4 .lowloop { position:absolute; inset:0; width:100%; height:100%; display:none; object-fit:cover; }
html[data-tier="high"] #s4 canvas, html[data-tier="medium"] #s4 canvas { display:block; }
html[data-tier="low"] #s4 .lowloop { display:block; }
#s4.gl-live .still { display:none; }   /* the live strip has drawn: hide the still behind it */
#ringF { position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px; border:1px solid #fff; left:0; top:0; opacity:0; transition:opacity .3s; pointer-events:none; z-index:2; }
#ringF::after { content:'×'; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); color:var(--red); font:500 14px 'JetBrains Mono',monospace; }
#ringF span { position:absolute; left:0; top:-16px; white-space:nowrap; color:#fff; font:400 10px 'JetBrains Mono',monospace; letter-spacing:.06em; }
.bigword { font-family:'Anybody',sans-serif; font-weight:800; font-size:12vw; line-height:.9; text-transform:uppercase; padding:0 var(--gut); font-variation-settings:'wdth' 100; }
.bigword.in { animation:squash 3.6s 1.1s infinite; }
@keyframes squash { 0%,86%,100%{font-variation-settings:'wdth' 100} 89%{font-variation-settings:'wdth' 52} 93%{font-variation-settings:'wdth' 150} 96%{font-variation-settings:'wdth' 70} }

/* ---------- work tiles ---------- */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,28px); padding:28px var(--gut) 0; perspective:1000px; }
.grid.reels { grid-template-columns:repeat(4,1fr); }
.tile { transform-style:preserve-3d; transition:transform .5s var(--ease); }
.tile .slot { position:relative; aspect-ratio:16/10; border:1px dashed rgba(255,255,255,.32); display:grid; place-items:center; text-align:center; color:rgba(255,255,255,.55); overflow:visible; }
.tile .slot img, .tile .slot video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reels .tile .slot { aspect-ratio:9/16; }
.brk2 { position:absolute; width:16px; height:16px; border:1px solid #fff; opacity:0; transition:all .45s var(--ease); }
.brk2.a { left:-14px; top:-14px; border-right:0; border-bottom:0; } .brk2.b { right:-14px; top:-14px; border-left:0; border-bottom:0; }
.brk2.c { left:-14px; bottom:-14px; border-right:0; border-top:0; } .brk2.d { right:-14px; bottom:-14px; border-left:0; border-top:0; }
.tile:hover .brk2, .cta:hover .brk2 { opacity:1; } .tile:hover .brk2.a { left:-1px; top:-1px; } .tile:hover .brk2.b { right:-1px; top:-1px; }
.tile:hover .brk2.c { left:-1px; bottom:-1px; } .tile:hover .brk2.d { right:-1px; bottom:-1px; }
.tile .meta { display:flex; justify-content:space-between; margin-top:10px; text-shadow:0 0 8px #000; }

/* ---------- 05 contact ---------- */
#s5 { min-height:110vh; border-top:1px solid var(--line); }
#s5 .pin { background:#000; }
#s5 canvas { position:absolute; inset:0; width:100%; height:100%; display:none; }
html[data-tier="high"] #s5 canvas, html[data-tier="medium"] #s5 canvas { display:block; }
#s5 .still img { object-position:72% 50%; }   /* keep the figure (right of the picture) in frame on narrow screens */
#s5.gl-live .still { display:none; }   /* the live dots have drawn: hide the still behind them */
html[data-tier="low"] #s5 .still img { animation:drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { transform:scale(1.06) translateX(-1.5%); } }
#s5 .veil { position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.6) 38%, transparent 62%); pointer-events:none; }
#s5 .front { padding:20vh var(--gut) 12vh; max-width:760px; }
#s5 .big { font:800 clamp(44px,6.4vw,120px)/.95 'Unbounded',sans-serif; letter-spacing:-.03em; margin:20px 0 36px; }
.cta { position:relative; display:inline-flex; gap:16px; align-items:center; padding:16px 22px; border:1px solid rgba(255,255,255,.6); font:500 12px 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; transition:background .45s var(--ease), color .45s var(--ease); }
.cta .arr { transition:transform .45s var(--ease); } .cta:hover { background:#fff; color:#000; } .cta:hover .arr { transform:translateX(6px); }
.cta:hover .brk2.a { left:-7px; top:-7px; } .cta:hover .brk2.b { right:-7px; top:-7px; } .cta:hover .brk2.c { left:-7px; bottom:-7px; } .cta:hover .brk2.d { right:-7px; bottom:-7px; }
.services { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; margin:48px 0 40px; max-width:560px; }
.services > li { border-top:1px solid var(--line); padding:13px 0; transition:color .3s, padding .45s var(--ease); }
.services > li:hover { color:var(--violet2); padding-left:8px; }
.rows { display:flex; gap:44px; flex-wrap:wrap; line-height:2.1; }

/* ---------- footer ---------- */
#s6 { border-top:1px solid var(--line); padding-top:8vh; }
.marq { overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:2.2vw 0; }
.marq .track { display:inline-flex; align-items:center; animation:marq 32s linear infinite; }
.marq:hover .track { animation-duration:80s; }
.marq span { font-family:'Anybody',sans-serif; font-weight:800; font-size:6.4vw; line-height:1; text-transform:uppercase; padding:0 2.2vw; font-variation-settings:'wdth' 100; animation:squash 4.2s infinite; }
.marq span:nth-child(4n+3) { animation-delay:1.4s; } .marq span:nth-child(4n+1) { animation-delay:2.8s; }
.marq em { font-style:normal; color:var(--red); font:500 2.6vw 'JetBrains Mono',monospace; }
@keyframes marq { to { transform:translateX(-50%); } }
.bar { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:22px var(--gut) 64px; }

/* ---------- work player ---------- */
#player { position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; border:0; background:#000; color:#fff; padding:0; }
#player::backdrop { background:#000; }
#player video { width:100%; height:100%; object-fit:contain; }
#player .close { position:absolute; z-index:2; right:var(--gut); top:var(--gut); background:none; border:1px solid rgba(255,255,255,.6); color:#fff; padding:10px 14px; }

/* ---------- debug badge (only with ?debug) ---------- */
#tierbadge { position:fixed; left:8px; bottom:8px; z-index:200; background:#000; color:#9d86ff; border:1px solid #9d86ff; padding:4px 8px; font:500 11px 'JetBrains Mono',monospace; }

/* ---------- no motion: static tier, and anyone whose device asks for reduced motion ---------- */
html[data-tier="static"] *, html[data-tier="static"] *::before, html[data-tier="static"] *::after { animation:none !important; transition:none !important; }
html[data-tier="static"] .rv { clip-path:none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html.js .rv { clip-path:none; }
}

@media (max-width:760px) {
  .grid, .grid.reels { grid-template-columns:1fr 1fr; }
  .strip { grid-template-columns:1fr; }
  #tools canvas { height:58vh; }
  #s5 .veil { background:rgba(5,5,5,.6); }
  .services { grid-template-columns:1fr; }
}