/* ==========================================================================
   Brandweb — website design system
   Merged brand: the rising W, the full-stop dot, Manrope + DM Mono.
   "A complete digital presence, built for growth."
   ========================================================================== */

:root{
  /* On light */
  --blue:#144C84;
  --red:#C8344E;
  --night:#0A1426;
  --mist:#EEF3F9;
  --tide:#D3E2F2;
  --slate:#52627A;
  --white:#FFFFFF;

  /* On dark */
  --deep:#111D35;
  --signal:#2962D9;
  --rise:#E8435A;
  --sky:#8FB4FF;
  --steel:#8B97B1;

  --line:#DCE4EE;
  --line-dk:#1E2B47;

  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --gutter:clamp(20px,5vw,56px);
  --maxw:1200px;
  --r:22px;
  --r-s:14px;
  --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{
  margin:0;
  background:var(--white);
  color:var(--night);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- The dot: a full stop that is also the peak of the W ---------- */
.dot{display:inline-block;width:.2em;height:.2em;margin-left:.05em;border-radius:50%;background:var(--red);box-shadow:var(--dot-ring,none);vertical-align:baseline}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* The navbar is sticky, so an anchor that scrolls to the top of the window
   arrives underneath it. Applies to /about#promise. */
[id]{scroll-margin-top:84px}
.band{padding-block:clamp(48px,5.4vw,76px)}
.band--tight{padding-block:clamp(36px,3.6vw,52px)}
.band--mist{background:var(--mist)}
.band--night{
  background-color:var(--night);color:#E9EEF8;
  background-image:linear-gradient(rgba(143,180,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,180,255,.07) 1px,transparent 1px);
  background-size:56px 56px;
  --dot:var(--rise);--line:var(--line-dk);
}
.band--night .dot{background:var(--rise)}
.band--night .eyebrow{color:var(--sky)}
.band--night .lede,.band--night .muted{color:var(--steel)}
.band--night h2,.band--night h3{color:#FFFFFF}
.band--blue{background:var(--blue);color:#FFFFFF;--line:rgba(255,255,255,.22)}
.band--blue .eyebrow{color:#C9D8EA}
.band--blue .lede{color:#D8E4F2}
.band--blue .dot{box-shadow:0 0 0 .05em #FFFFFF}
.band--blue h2{color:#FFFFFF}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}

/* ---------- Type ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.band--night .eyebrow::before{background:var(--rise)}
h1,.h1{font-weight:800;font-size:clamp(38px,5.6vw,76px);line-height:1;letter-spacing:-.05em;color:var(--blue);text-wrap:balance}
h2,.h2{font-weight:800;font-size:clamp(30px,3.9vw,52px);line-height:1.02;letter-spacing:-.045em;color:var(--blue);text-wrap:balance}
h3,.h3{font-weight:800;font-size:21px;line-height:1.25;letter-spacing:-.02em;color:var(--blue)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--slate);max-width:56ch;text-wrap:pretty}
.muted{color:var(--slate)}
.small{font-size:14.5px;line-height:1.55;color:var(--slate)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.stack{display:grid;gap:clamp(14px,1.6vw,20px)}
.stack-sm{display:grid;gap:10px}
.head{display:grid;gap:14px;max-width:62ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:none;font-weight:700;font-size:15px;white-space:nowrap;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:#FFFFFF}
.btn-primary:hover{background:#17589a}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
.btn-line:hover{background:rgba(20,76,132,.06)}
.band--night .btn-primary{background:var(--signal)}
.band--night .btn-line,.band--blue .btn-line{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);color:#FFFFFF}
.band--blue .btn-primary{background:#FFFFFF;color:var(--blue)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:600}
.nav-links a{color:var(--night);transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--blue)}
.nav-links a[aria-current="page"]{color:var(--blue)}
.nav-links__cta{display:none}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;width:42px;height:42px;padding:0;border:0;border-radius:12px;background:var(--mist);cursor:pointer}
.burger span{display:block;width:18px;height:2px;margin:3px auto;background:var(--night);border-radius:2px;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.nav.is-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.skip{position:absolute;left:-9999px;top:8px;z-index:60;padding:10px 16px;border-radius:10px;background:var(--night);color:#fff}
.skip:focus{left:16px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--mist) 0%,var(--white) 100%);padding-block:clamp(48px,7vw,96px)}
/* The hero has the same padding above and below. It fades into white, so a
   white band under it reads as one space and the two paddings add up, which is
   why that band's own top padding stays small. A tall card beside the first
   text must not push that text down either. */
.hero + .band:not(.band--mist,.band--night,.band--blue){padding-top:clamp(12px,2vw,28px)}
.hero + .band .split{align-items:start}
.hero__art{position:absolute;z-index:-1;right:-10%;bottom:-18%;width:min(62%,620px);opacity:.09;pointer-events:none}
.hero__in{display:grid;gap:clamp(22px,3vw,34px)}
.hero h1{max-width:16ch}
.hero .lede{max-width:54ch;font-size:clamp(18px,1.7vw,22px);color:#32415C}
.hero__proof{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:6px;font-size:14.5px;color:var(--slate)}
.hero__proof span{display:inline-flex;align-items:center;gap:9px}
.hero__proof span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* ---------- Cards ---------- */
.card{display:grid;gap:14px;align-content:start;padding:clamp(22px,2.4vw,30px);border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.card--mist{background:var(--mist);box-shadow:none}
.card--night{background:var(--deep);box-shadow:inset 0 0 0 1px var(--line-dk);color:#E9EEF8}
.card--night h3{color:#FFFFFF}
.card--blue{background:var(--blue);box-shadow:none;color:#FFFFFF}
.card--blue h3{color:#FFFFFF}
.card--link{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card--link:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--tide),0 18px 40px -26px rgba(10,20,38,.5)}
.card__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-s);background:var(--mist);color:var(--blue)}
.card--night .card__icon,.card--blue .card__icon{background:rgba(255,255,255,.12);color:#FFFFFF}
.card__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card p{font-size:15px;line-height:1.55;color:var(--slate)}
.card--night p,.card--blue p{color:#C6D2E6}
.card__more{margin-top:auto;font-weight:700;font-size:14.5px;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.card--night .card__more,.card--blue .card__more{color:#FFFFFF}
.card__more span{transition:transform .2s var(--ease)}
.card--link:hover .card__more span{transform:translateX(4px)}

.tag{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:5px 12px;border-radius:999px;background:rgba(20,76,132,.08);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--blue)}
.card--night .tag,.card--blue .tag{background:rgba(255,255,255,.14);color:#FFFFFF}

.head--row{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px;max-width:none}
.head--row > div{display:grid;gap:10px}

/* ---------- Portfolio ---------- */
/* The client's own colour, set inline from projects.php, is the background of
   the tile; the logos are all light-ground versions, so the tints are pale on
   purpose. object-fit keeps a wide wordmark and a square mark the same height. */
.work-tile{display:grid;place-items:center;padding:clamp(18px,2.6vw,30px);border-radius:var(--r-s);height:168px}
.work-tile img{width:auto;max-width:min(82%,300px);max-height:92px;object-fit:contain}
.work-tile--lg{height:auto;min-height:240px;border-radius:var(--r)}
.work-tile--lg img{max-width:min(78%,360px);max-height:124px}
/* The portfolio that closes every page: four across, so the tiles are shorter. */
.portfolio h3{font-size:18px}
.portfolio .work-tile{height:clamp(96px,9vw,128px);padding:14px}
.portfolio .work-tile img{max-width:90%;max-height:76px}
.work-tile--sm{height:104px;padding:16px}
.work-tile--sm img{max-height:56px;max-width:80%}
.work-card__name{font-size:clamp(21px,2vw,26px)}

/* The scope of a project, as pills. A list, because that is what it is. */
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags li{padding:5px 11px;border-radius:999px;background:var(--mist);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)}
.tags--lg li{padding:7px 14px;font-size:11.5px;background:rgba(20,76,132,.08);color:var(--blue)}
.card--night .tags li,.band--night .tags li{background:rgba(255,255,255,.12);color:#C6D2E6}

/* Place, year and address, under a case-study heading. */
.meta{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--slate)}
.meta li{position:relative}
.meta li + li::before{content:"";position:absolute;left:-14px;top:.5em;width:4px;height:4px;border-radius:50%;background:var(--tide)}
.meta a{font-weight:500;color:var(--blue);border-bottom:1px solid rgba(20,76,132,.3)}
.meta a:hover{border-bottom-color:var(--blue)}

/* ---------- Lists ---------- */
.ticks{display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;background:var(--blue)}
.ticks li::after{content:"";position:absolute;left:4.5px;top:.72em;width:5px;height:2.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.band--night .ticks li::before{background:var(--signal)}
.dots li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5}
.dots li + li{margin-top:8px}
.dots li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* ---------- Guides: the index, and an article ---------- */
.guides{display:grid;gap:clamp(14px,1.8vw,20px)}
.guides h2{font-size:clamp(21px,2.1vw,27px)}
.guides .card{gap:12px}
/* .hero__in is also .wrap, so narrowing it centres the whole block and the
   article's title no longer lines up with its own first paragraph. The
   measure belongs on the text. */
.hero--post h1{max-width:20ch}
.hero--post .lede{max-width:60ch}
.hero--post .eyebrow a{color:inherit;border-bottom:1px solid currentColor}

/* The article itself. One column, measured for reading rather than for the
   grid the rest of the site is built on. */
.prose{max-width:68ch;font-size:17.5px;line-height:1.72;color:#32415C}
.prose > * + *{margin-top:1.15em}
.prose h2{margin-top:1.9em;font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--night)}
.prose h3{margin-top:1.6em;font-size:19px;color:var(--night)}
.prose strong{color:var(--night)}
.prose a{font-weight:700;color:var(--blue);border-bottom:1px solid rgba(20,76,132,.3)}
.prose a:hover{border-bottom-color:var(--blue)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.5em}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li::marker{color:var(--blue)}
.prose-table{width:100%;border-collapse:collapse;font-size:16px}
.prose-table th{text-align:left;padding:10px 14px 10px 0;border-bottom:1.5px solid var(--night);font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.prose-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose-table tr td:first-child{font-weight:700;color:var(--night)}
.post-end{display:flex;flex-wrap:wrap;gap:12px;max-width:68ch;margin-top:clamp(30px,4vw,48px);padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--line)}

/* ---------- The growth path ---------- */
.path{display:block;width:100%;height:auto}
.path-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:16px;padding:0;list-style:none;text-align:center}
.path-steps b{display:block;font-weight:800;font-size:16px;letter-spacing:-.02em;color:#FFFFFF}
.path-steps span{font-size:13.5px;line-height:1.45;color:var(--steel)}
.path-steps li:last-child b::after{content:"";display:inline-block;width:.2em;height:.2em;margin-left:.12em;border-radius:50%;background:var(--rise);vertical-align:.08em}

/* ---------- Price table ---------- */
.rows{display:grid;border-top:1.5px solid currentColor}
.rows > li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:baseline;padding-block:16px;border-bottom:1px solid var(--line)}
.rows h3{font-size:18px}
.rows p{grid-column:1;font-size:14.5px;line-height:1.5;color:var(--slate)}
.band--night .rows p{color:var(--steel)}
.rows .amount{grid-row:1;grid-column:2;font-family:var(--mono);font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Contact ---------- */
/* As tall as the two cards beside it. The band after a hero aligns its columns
   to the top, and align-self is how one column opts out of that. WhatsApp's own
   green, teal and deep teal, with the teal where the words sit: white on the
   green alone is too pale to read. The hover moves the shadow and not the button:
   a transform blurs the logo while it runs. */
.whatsapp{align-self:stretch;display:grid;place-content:center;justify-items:center;gap:22px;min-height:240px;padding:clamp(28px,4vw,48px);border-radius:var(--r);background:linear-gradient(160deg,#25D366 0%,#128C7E 56%,#075E54 100%);box-shadow:0 26px 50px -30px rgba(7,94,84,.75);color:#FFFFFF;font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.03em;text-align:center;text-wrap:balance;transition:box-shadow .2s var(--ease)}
.whatsapp:hover{box-shadow:0 30px 60px -24px rgba(7,94,84,.95)}
.whatsapp svg{width:96px;height:96px;fill:currentColor}
.contact-lines{display:grid;gap:12px;font-size:16px}
.contact-lines a{font-weight:700;color:var(--blue);word-break:break-word}

/* ---------- Footer ---------- */
.foot{
  background-color:var(--night);color:#C6D2E6;
  background-image:linear-gradient(rgba(143,180,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(143,180,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
  padding-block:clamp(44px,6vw,72px) 28px;
}
.foot__in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:clamp(22px,2.4vw,36px)}
.foot img{height:28px;width:auto}
.foot h4{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);margin-bottom:12px}
.foot li + li{margin-top:9px}
.foot a{font-size:15px;color:#C6D2E6;transition:color .2s var(--ease)}
.foot a:hover{color:#FFFFFF}
.foot__line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(28px,4vw,48px);padding-top:20px;border-top:1px solid var(--line-dk);font-family:var(--mono);font-size:11.5px;color:var(--steel)}
.foot__claim{max-width:34ch;font-size:15px;line-height:1.55;color:var(--steel)}
/* The growth disclaimer, on every page. Quiet, above the registration line,
   and not in the link columns: it is a statement, not navigation. */
.foot__note{max-width:100ch;margin-top:clamp(26px,3.4vw,40px);font-size:13.5px;line-height:1.6;color:var(--steel)}
.foot__note a{font-size:inherit;font-weight:700;color:#C6D2E6;border-bottom:1px solid rgba(198,210,230,.38)}
.foot__note a:hover{color:#FFFFFF;border-bottom-color:#FFFFFF}

/* ---------- Cookie banner ---------- */
/* Fixed, so it moves nothing when it appears, and above the navigation, whose
   mobile menu is fixed too. .btn sets display, which would beat [hidden]. */
.consent{position:fixed;z-index:70;right:20px;bottom:20px;display:grid;gap:12px;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:22px;border-radius:var(--r);background:var(--white);box-shadow:0 0 0 1px var(--line),0 30px 60px -24px rgba(10,20,38,.5);font-size:15px;line-height:1.5;color:var(--slate)}
.consent:focus{outline:none}
.consent[hidden],.consent [hidden]{display:none}
.consent a{font-weight:700;color:var(--blue)}
.consent__choose{display:grid;gap:14px;padding-block:14px;border-block:1px solid var(--line)}
.consent__row{display:flex;justify-content:space-between;gap:18px;font-size:14.5px}
.consent__row strong{display:block;color:var(--night)}
.consent__row .mono{flex:none;padding-top:3px}
label.consent__row{cursor:pointer}
.consent__row input{appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--slate);cursor:pointer;transition:background .2s var(--ease)}
.consent__row input::after{content:"";position:absolute;top:5px;left:5px;width:16px;height:16px;border-radius:50%;background:var(--slate);transition:transform .2s var(--ease)}
.consent__row input:checked{background:var(--blue);box-shadow:none}
.consent__row input:checked::after{background:#FFFFFF;transform:translateX(18px)}
.consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consent__actions .btn{justify-content:center;padding-inline:12px}
.consent__actions .btn-line{grid-column:1/-1}
@media print{.consent{display:none}}

/* ---------- YouTube videos ---------- */
/* No overflow:hidden: on a narrow phone the gate is taller than 16:9, and
   aspect-ratio lets it grow only while nothing clips it. */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r-s);background:var(--night);color:#C6D2E6}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit}
.video__gate{display:grid;align-content:center;justify-items:start;gap:10px;height:100%;padding:clamp(18px,4vw,36px);font-size:15px;line-height:1.5}
.video__title{font-weight:800;font-size:clamp(17px,2vw,21px);line-height:1.25;letter-spacing:-.02em;color:#FFFFFF}
.video .btn-primary{background:var(--signal)}
.video a{font-size:14.5px;font-weight:700;color:#C6D2E6;border:0}
.video a:hover{color:#FFFFFF}
.video [hidden]{display:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .nav-links{
    position:fixed;inset:64px 0 auto;display:none;flex-direction:column;align-items:flex-start;gap:4px;
    padding:18px var(--gutter) 26px;background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -30px rgba(10,20,38,.5);font-size:17px;
  }
  .nav.is-open .nav-links{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding-block:10px}
  .burger{display:block}
  .nav-cta .btn{display:none}
  .nav-links__cta{display:block;margin-top:10px}
  .nav-links__cta .btn{display:flex;width:100%;justify-content:center;padding-block:13px}
  .split,.cols-2,.cols-3{grid-template-columns:1fr}
  .path-steps{grid-template-columns:repeat(2,minmax(0,1fr));text-align:left}
}
@media (max-width:560px){
  .whatsapp svg{width:72px;height:72px}
  .consent{right:12px;bottom:12px;padding:18px}
  .cols-4{grid-template-columns:1fr}
  .path-steps{grid-template-columns:1fr}
  .prose{font-size:16.5px}
  .prose-table{display:block;overflow-x:auto}
  .rows > li{grid-template-columns:1fr}
  .rows .amount{grid-row:auto;grid-column:1}
  .foot__in{grid-template-columns:1fr}
  /* Every page ends with this, so on a phone it is two logos across and the
     summaries wait for /work: four full cards would be a screen and a half. */
  .portfolio .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portfolio .card{gap:10px;padding:12px}
  .portfolio .card p,.portfolio .card__more{display:none}
  .portfolio h3{font-size:15px}
  .portfolio .work-tile{height:84px;padding:10px}
  .portfolio .work-tile img{max-height:48px}
}