/* Case study: pawfect */
/* Layout: Decibel's night shell around Pawfect Shine's own world (charcoal, cream, sky, coral, Outfit + Playfair italic).
   One 12-column grid, 1360px max. The centrepiece is a scroll-dealt fan of the salon's Happy Clients photos. */
:root{
  --night:#071D23; --ink:#0F343C; --signal:#00C6E6; --coral:#F47F55; --paper:#F8F4EC;
  --on-night:#F8F4EC; --on-night-2:rgba(248,244,236,.66); --on-night-3:rgba(248,244,236,.42); --night-line:rgba(248,244,236,.12);
  --on-paper:#0F343C; --on-paper-2:rgba(15,52,60,.7); --on-paper-3:rgba(15,52,60,.5); --paper-line:rgba(15,52,60,.14);
  /* Pawfect Shine palette, from its site */
  --p-char:#2C2A29; --p-cream:#FAF9F6; --p-blush:#FEF9F5; --p-coral:#D95542; --p-coral-2:#C2442F; --p-sky:#D4F1F9;
  --p-char-2:rgba(44,42,41,.68); --p-char-3:rgba(44,42,41,.46); --p-char-line:rgba(44,42,41,.12);
  --p-cream-2:rgba(250,249,246,.7); --p-cream-3:rgba(250,249,246,.45); --p-cream-line:rgba(250,249,246,.14);
  /* the shell's base styles read these */
  --f-black:var(--night); --f-off:var(--on-night); --f-orange:var(--p-coral); --f-off-2:var(--on-night-2); --f-off-3:var(--on-night-3); --f-off-line:var(--night-line);
  --f-blk-2:var(--p-char-2); --f-blk-3:var(--p-char-3); --f-blk-line:var(--p-char-line);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-paw:"Outfit","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Playfair Display",Georgia,"Times New Roman",serif;

  --t-display:clamp(2.5rem,5.8vw,6.25rem); --t-h3:clamp(1.5rem,2.2vw,2rem);
  --t-lede:clamp(1.0625rem,1.35vw,1.3125rem); --t-body:1.0625rem; --t-ui:.9375rem; --t-label:.75rem;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --hdr:72px; --gutter:clamp(16px,4vw,48px); --max:1360px;
  color-scheme:dark;
}

body{background:var(--night);color:var(--on-night)}
::selection{background:var(--p-coral);color:#fff}
.btn-signal{background:var(--signal);color:var(--night)}
.btn-coral{background:var(--p-coral);color:#fff}
@media (hover:hover) and (pointer:fine){.btn-coral:hover{background:var(--p-coral-2)}}
.cream{background:var(--p-cream);color:var(--p-char);color-scheme:light}
.cream :focus-visible{outline-color:var(--p-char)}
.cream .head p{color:var(--p-char-2)}
.charcoal{background:var(--p-char);color:var(--p-cream)}
.charcoal .head p{color:var(--p-cream-2)}
.paw-em{font-family:var(--f-serif);font-style:italic;font-weight:600;letter-spacing:-.01em;color:var(--p-coral)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;background:radial-gradient(80% 70% at 82% 40%,#3A3735 0%,var(--p-char) 62%);color:var(--p-cream);
  padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(28px,5vw,72px));padding-bottom:clamp(64px,8vw,120px)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.hero-copy{grid-column:1 / span 6;display:grid;gap:28px;align-content:start}
.masthead{font:900 clamp(3.5rem,9.4vw,9.25rem)/.84 var(--f-paw);letter-spacing:-.045em;text-transform:uppercase;margin:0}
.masthead .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.masthead .ln > span{display:inline-block;animation:rise 900ms var(--ease-out) both;animation-delay:var(--d)}
.masthead .paw-em{text-transform:none;font-size:1.08em;letter-spacing:-.03em;line-height:.9}
@keyframes rise{from{transform:translateY(105%)}}
.hero h1{font:600 clamp(1.375rem,2vw,1.875rem)/1.2 var(--f-display);font-stretch:96%;letter-spacing:-.015em;max-width:24ch;color:var(--p-cream)}
.hero-lede{color:var(--p-cream-2);max-width:46ch;font-size:var(--t-lede)}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:0;padding-top:20px;border-top:1px solid var(--p-cream-line)}
.meta div{display:grid;gap:5px;min-width:0}
.meta dt{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-cream-3)}
.meta dd{margin:0;font-weight:500;line-height:1.4}
.hero-art{grid-column:7 / span 6;position:relative;aspect-ratio:1 / 1;max-width:100%}
.hero-art .disc{position:absolute;inset:6% 4% 4% 10%;border-radius:50%;overflow:hidden;background:#A5D6E6;box-shadow:0 60px 120px -50px rgba(0,0,0,.9);transform:translateY(var(--py,0px));animation:pop 1200ms var(--ease-out) both;animation-delay:300ms}
.hero-art .disc img{width:100%;height:100%;object-fit:cover}
.hero-art .snap{position:absolute;margin:0;width:27%;aspect-ratio:3 / 4;border-radius:18px;overflow:hidden;border:5px solid var(--p-cream);box-shadow:0 30px 60px -24px rgba(0,0,0,.75);transform:translateY(var(--py,0px)) rotate(var(--r));animation:drop 1000ms var(--ease-out) both;animation-delay:var(--d)}
.hero-art .snap img{width:100%;height:100%;object-fit:cover}
.snap-a{left:0;bottom:4%;--r:-7deg}
.snap-b{right:0;top:2%;--r:6deg}
.tag{position:absolute;left:44%;bottom:-2%;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:999px;background:var(--p-cream);color:var(--p-char);font:600 .9375rem/1 var(--f-paw);box-shadow:0 24px 48px -20px rgba(0,0,0,.7);animation:in-up 600ms var(--ease-out) both;animation-delay:1300ms}
.tag i{width:28px;height:28px;border-radius:50%;background:var(--p-coral);display:grid;place-items:center;color:#fff;font:italic 700 1rem/1 var(--f-serif)}
@keyframes pop{from{opacity:0;transform:scale(.86)}}
@keyframes drop{from{opacity:0;translate:0 -28px}}
@media (prefers-reduced-motion:reduce){.masthead .ln > span,.hero-art .disc,.hero-art .snap,.tag{animation-name:in-fade;animation-duration:400ms}}

/* ===== The deal: Happy Clients ===== */
.deal{position:relative;height:300vh;background:linear-gradient(180deg,var(--p-sky) 0%,#E9F7FB 55%,var(--p-cream) 100%);color:var(--p-char);color-scheme:light}
.deal-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding-top:calc(var(--hdr) + clamp(16px,3vw,40px));padding-bottom:clamp(24px,4vw,48px)}
.deal-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 24px;align-items:end}
.deal-head h2{grid-column:1 / span 8;font:900 clamp(2.5rem,6.2vw,6.25rem)/.9 var(--f-paw);letter-spacing:-.045em;text-transform:uppercase}
.deal-head h2 .paw-em{text-transform:none;font-size:1.06em;letter-spacing:-.025em}
.deal-head p{grid-column:9 / span 4;color:var(--p-char-2);max-width:36ch}
.table{position:relative;min-height:0}
.dc{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:3 / 4;margin:calc(var(--cw) * -.6667) 0 0 calc(var(--cw) * -.5);
  border-radius:22px;background:#fff;padding:7px;box-shadow:0 2px 4px rgba(44,42,41,.06),0 30px 60px -28px rgba(44,42,41,.55);
  will-change:translate,rotate;transition:scale 250ms var(--ease-out),box-shadow 250ms var(--ease-out)}
.dc img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.dc figcaption{position:absolute;left:14px;bottom:14px;padding:7px 11px;border-radius:999px;background:rgba(250,249,246,.92);color:var(--p-char);font:600 .8125rem/1 var(--f-paw);opacity:0;translate:0 6px;transition-property:opacity,translate;transition-duration:200ms;transition-timing-function:var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .dc:hover{scale:1.06;z-index:20;box-shadow:0 2px 4px rgba(44,42,41,.06),0 44px 80px -30px rgba(44,42,41,.65)}
  .dc:hover figcaption{opacity:1;translate:0 0}
}
.deal-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font:500 var(--t-label)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-char-3)}
.deal-meter{display:flex;align-items:center;gap:12px}
.deal-meter span{position:relative;width:120px;height:2px;border-radius:2px;background:var(--p-char-line);overflow:hidden}
.deal-meter span i{position:absolute;inset:0;background:var(--p-coral);transform-origin:left;transform:scaleX(var(--dp,0))}
.deal-meter b{font-weight:500;color:var(--p-char);font-variant-numeric:tabular-nums}

/* ===== Brief + Dezeray ===== */
.brief{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.brief-copy{grid-column:1 / span 6;display:grid;gap:28px}
.brief-q{font:600 clamp(1.75rem,3.2vw,3rem)/1.12 var(--f-display);font-stretch:96%;letter-spacing:-.02em}
.brief-q span{color:var(--p-char-3)}
.brief-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:24px;border-top:1px solid var(--p-char-line)}
.brief-cols h3{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-char-3);margin-bottom:10px}
.brief-cols p{color:var(--p-char-2)}
.owner{grid-column:8 / span 5;margin:0;display:grid;gap:18px}
.owner-photo{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4 / 5}
.owner-photo img{width:100%;height:118%;object-fit:cover;object-position:50% 30%;transform:translateY(var(--py,0px))}
.owner blockquote{margin:0;font:italic 600 clamp(1.375rem,2vw,1.75rem)/1.25 var(--f-serif);letter-spacing:-.01em}
.owner blockquote b{color:var(--p-coral);font-weight:700}
.owner figcaption{color:var(--p-char-2);font-size:var(--t-ui)}
.owner figcaption strong{color:var(--p-char);font-weight:600}

/* ===== Local search ===== */
.search-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.serp{grid-column:1 / span 7;background:#fff;color:#1f1f1f;color-scheme:light;border-radius:28px;padding:clamp(14px,2vw,22px);box-shadow:0 50px 100px -50px rgba(0,0,0,.9);font-family:var(--f-body);display:grid;gap:14px;min-width:0}
.q-bar{display:flex;align-items:center;gap:12px;height:52px;padding-inline:18px;border-radius:999px;background:#F3F2EF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);font-size:1rem}
.q-bar svg{width:18px;height:18px;flex:none;color:#7a7874}
.q-text{white-space:nowrap;overflow:hidden;min-width:0}
.q-caret{width:2px;height:20px;background:var(--p-coral);margin-left:-8px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.map{position:relative;height:clamp(180px,22vw,260px);border-radius:18px;overflow:hidden;background:#EEF2EC}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;left:58%;top:46%;translate:-50% -100%;display:grid;justify-items:center}
.pin b{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;background:#fff;color:var(--p-char);font:600 .8125rem/1 var(--f-paw);box-shadow:0 10px 24px -10px rgba(0,0,0,.5);white-space:nowrap}
.pin b i{width:22px;height:22px;border-radius:50%;background:var(--p-coral);color:#fff;display:grid;place-items:center;font:italic 700 .8125rem/1 var(--f-serif)}
.pin::after{content:"";width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--p-coral);box-shadow:0 0 0 6px rgba(217,85,66,.22)}
@media (prefers-reduced-motion:no-preference){.pin::after{animation:ping 2.4s var(--ease-out) infinite}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(217,85,66,.5)}70%,100%{box-shadow:0 0 0 18px rgba(217,85,66,0)}}
.biz{display:grid;gap:10px;padding:6px 6px 4px}
.biz h3{font:700 1.375rem/1.15 var(--f-paw);letter-spacing:-.01em;color:#1f1f1f}
.biz-sub{color:#5f5d59;font-size:.9375rem;line-height:1.5}
.biz-sub span{color:#1e8e3e;font-weight:500}
.biz-acts{display:flex;gap:8px;flex-wrap:wrap}
.biz-acts span{display:inline-flex;align-items:center;gap:8px;height:38px;padding-inline:14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);font-size:.875rem;font-weight:500;color:#2a2a2a}
.biz-acts span:first-child{background:var(--p-coral);color:#fff;box-shadow:none}
.biz-pics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.biz-pics img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px}
.snippet{display:grid;gap:4px;padding:16px 6px 4px;border-top:1px solid #ECEAE6}
.snippet small{color:#5f5d59;font-size:.8125rem}
.snippet a{font:500 1.125rem/1.3 var(--f-body);color:#1a0dab;text-decoration:none}
.snippet p{color:#4d5156;font-size:.875rem;line-height:1.5}
.search-notes{grid-column:9 / span 4;display:grid;gap:0;align-self:center;border-top:1px solid var(--night-line);list-style:none;margin:0;padding:0}
.search-notes li{display:grid;grid-template-columns:3em minmax(0,1fr);gap:12px;padding-block:22px;border-bottom:1px solid var(--night-line)}
.search-notes li span{font:500 var(--t-label)/1.7 var(--f-mono);color:var(--signal)}
.search-notes b{display:block;font:700 1.1875rem/1.2 var(--f-display);font-stretch:95%;letter-spacing:-.01em;margin-bottom:6px}
.search-notes p{color:var(--on-night-2);font-size:var(--t-ui)}

/* ===== Ads ===== */
.ads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:start}
.ad{margin:0;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(44,42,41,.08),0 40px 80px -48px rgba(44,42,41,.6);color:var(--p-char);font-family:var(--f-body);min-width:0}
.ad:nth-child(2){margin-top:clamp(0px,5vw,72px)}
.ad:nth-child(3){margin-top:clamp(0px,2.5vw,36px)}
.ad-top{display:flex;align-items:center;gap:10px;padding:12px 14px}
.ad-top i{width:32px;height:32px;border-radius:50%;background:var(--p-coral);color:#fff;display:grid;place-items:center;font:italic 700 1rem/1 var(--f-serif);flex:none}
.ad-top b{display:block;font-size:.875rem;font-weight:600;line-height:1.2}
.ad-top small{display:block;font-size:.75rem;color:var(--p-char-3)}
.ad-img{position:relative;aspect-ratio:4 / 5;overflow:hidden}
.ad-img img{width:100%;height:100%;object-fit:cover;transition:scale 700ms var(--ease-out)}
.ad-img h3{position:absolute;left:16px;right:16px;bottom:16px;font:900 clamp(1.5rem,2.4vw,2.25rem)/.92 var(--f-paw);letter-spacing:-.03em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.ad-img h3 em{font:italic 700 1.05em/.9 var(--f-serif);text-transform:none;letter-spacing:-.01em;color:#FFD9CF}
.ad-img::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,rgba(44,42,41,0),rgba(44,42,41,.75))}
.ad-img h3{z-index:1}
.ad-bot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px}
.ad-bot p{font-size:.875rem;line-height:1.4;color:var(--p-char-2);min-width:0}
.ad-bot span{flex:none;display:inline-flex;align-items:center;height:36px;padding-inline:14px;border-radius:999px;background:var(--p-char);color:#fff;font-size:.8125rem;font-weight:600}
@media (hover:hover) and (pointer:fine){.ad:hover .ad-img img{scale:1.04}}
.land{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;margin-top:clamp(56px,8vw,112px)}
.land-copy{grid-column:1 / span 4;display:grid;gap:16px}
.land-copy h3{font:700 var(--t-h3)/1.1 var(--f-display);font-stretch:95%;letter-spacing:-.02em}
.land-copy p{color:var(--p-char-2)}
.browser{grid-column:6 / span 7;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(44,42,41,.08),0 50px 100px -50px rgba(44,42,41,.6)}
.browser-bar{display:flex;align-items:center;gap:6px;height:36px;padding-inline:14px;background:#F1EFEA;border-bottom:1px solid rgba(44,42,41,.08)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(44,42,41,.18)}
.browser-bar span{margin-left:10px;font:500 .75rem/1 var(--f-mono);color:var(--p-char-3)}
.browser img{width:100%;height:auto}

/* ===== Price finder ===== */
.prices-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.weigh{grid-column:1 / span 5;display:grid;gap:18px}
.weigh-read{display:flex;align-items:baseline;gap:12px}
.weigh-read b{font:900 clamp(4rem,8vw,7.5rem)/.85 var(--f-paw);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.weigh-read span{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-cream-3)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0;touch-action:pan-y}
.range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--p-coral) var(--fill,30%),rgba(250,249,246,.16) var(--fill,30%))}
.range::-moz-range-track{height:6px;border-radius:3px;background:rgba(250,249,246,.16)}
.range::-moz-range-progress{height:6px;border-radius:3px;background:var(--p-coral)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--p-cream);box-shadow:0 0 0 6px rgba(217,85,66,.35),0 6px 14px -4px rgba(0,0,0,.6);transition:scale 150ms ease-out}
.range::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:var(--p-cream);box-shadow:0 0 0 6px rgba(217,85,66,.35)}
.range:active::-webkit-slider-thumb{scale:1.1}
.range:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.weigh-scale{display:flex;justify-content:space-between;font:500 .6875rem/1 var(--f-mono);letter-spacing:.06em;color:var(--p-cream-3);margin-top:-8px}
.weigh small{color:var(--p-cream-3);font-size:.8125rem}
.svc{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svc div{background:rgba(250,249,246,.06);box-shadow:inset 0 0 0 1px var(--p-cream-line);border-radius:22px;padding:clamp(16px,2vw,24px);display:grid;gap:10px;min-width:0}
.svc h3{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-cream-2)}
.svc b{font:900 clamp(2rem,3.4vw,3.25rem)/1 var(--f-paw);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.svc div:nth-child(3){background:var(--p-coral);box-shadow:none}
.svc div:nth-child(3) h3{color:rgba(255,255,255,.8)}
.svc p{font-size:.875rem;color:var(--p-cream-2);line-height:1.4}
.svc div:nth-child(3) p{color:rgba(255,255,255,.85)}
.svc .tm{font:500 .8125rem/1 var(--f-mono);color:var(--p-cream-3)}
.svc div:nth-child(3) .tm{color:rgba(255,255,255,.75)}
.offer{margin-top:clamp(32px,4vw,48px);display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--p-cream-line);color:var(--p-cream-2);font-size:var(--t-ui)}
.offer b{color:var(--p-cream);font-weight:600}

/* Delivered */
.shipped{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.shipped h2{grid-column:1 / span 5;font-size:var(--t-display);font-weight:800;font-stretch:90%;letter-spacing:-.03em;line-height:.94}
.shipped ul{grid-column:7 / span 6;list-style:none;margin:0;padding:0;border-top:1px solid var(--night-line)}
.shipped li{display:grid;grid-template-columns:3em minmax(0,1fr);gap:16px;padding-block:22px;border-bottom:1px solid var(--night-line)}
.shipped li span{font:500 var(--t-label)/1.7 var(--f-mono);color:var(--signal)}
.shipped li b{display:block;font:700 1.25rem/1.2 var(--f-display);font-stretch:95%;letter-spacing:-.01em;margin-bottom:4px}
.shipped li p{color:var(--on-night-2);font-size:var(--t-ui)}

/* Responsive */
@media (max-width:1080px){
  .hero-copy,.hero-art{grid-column:1 / -1}
  .hero-art{max-width:640px;width:100%;justify-self:center;margin-top:16px}
  .deal-head h2,.deal-head p{grid-column:1 / -1}
  .brief-copy,.owner{grid-column:1 / -1}
  .owner{max-width:560px}
  .serp,.search-notes{grid-column:1 / -1}
  .land-copy,.browser{grid-column:1 / -1}
  .weigh,.svc{grid-column:1 / -1}
  .head h2,.head p{grid-column:1 / -1}
  .shipped h2,.shipped ul{grid-column:1 / -1}
  .next h2,.next-side{grid-column:1 / -1}
}
@media (max-width:760px){
  :root{--hdr:64px}
  .crumb{display:none}
  .brand svg{height:31px}
  .nav .btn{padding-block:11px;padding-inline:16px 14px}
  .hero-copy{text-align:center;justify-items:center}
  .hero h1,.hero-lede{margin-inline:auto}
  .meta{text-align:left;width:100%}
  .deal{height:240vh}
  .deal-head p{display:none}
  .deal-head h2{text-align:center}
  .brief-cols{grid-template-columns:minmax(0,1fr)}
  .ads{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}
  .ad:nth-child(n){margin-top:0}
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc div{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .svc div p{grid-column:1 / -1}
  .svc b{grid-row:1 / span 2;grid-column:2}
  .biz-pics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .biz-pics img:nth-child(4){display:none}
}