style.css

:root{
  --paper:#F4F2ED;
  --ink:#14110F;
  /* body copy is the site's main voice and most of it is set in this grey, so
     it is picked for contrast rather than for delicacy: 7.1:1 on paper, where
     the old #6B655E was 5.1:1 and read as washed out at 15px */
  --muted:#55504A;
  --rule:#DAD5CC;
  --accent:#1E40AF;
  --panel:#EDEAE3;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#131211;
    --ink:#EDEAE4;
    --muted:#A69D92;
    --rule:#2C2926;
    --accent:#A5BCF9;
    --panel:#1B1917;
  }
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font:17px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:0 24px;
}

.wrap{width:100%;max-width:860px;margin:0 auto;display:flex;flex-direction:column;flex:1}

/* header */
header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding:26px 0 14px;
  border-bottom:1px solid var(--rule);
}
.mark{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
  border:0;
}
/* the mark is drawn in --ink by the generator, so it inherits nothing here */
.mark svg{flex:none}

nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* layout */
main{flex:1;display:flex;align-items:center;padding:44px 0}
body.doc main{align-items:flex-start;padding:36px 0}
/* The home is three sections and a footer. gap is 0 because each section now
   owns its own padding: the divisions have to be visible, and a shared gap
   cannot put a rule or a change of ground between them. */
body.home main{flex-direction:column;justify-content:flex-start;gap:0;padding:0}
main > *{width:100%}

/* the home's three sections */
.hero{
  padding:54px 0 78px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:46px;
}
.band{padding:66px 0 72px}
.closing{padding:66px 0 78px;border-bottom:1px solid var(--rule)}

/* The band is the page's one change of ground, and it is a deeper tone of the
   same paper rather than an inversion. Near-black was too
   loud for one section of a five-section page, and flipping the whole palette
   meant the reader crossed into what looked briefly like a different site — and
   then crossed back. Redeclaring three tokens keeps ink, muted and accent
   exactly where they were, so only the ground moves. The box inside it lifts
   the other way, to the page's own paper, which is why it reads as sitting on
   the band rather than cut into it.

   Only the ground bleeds, not the box. The band keeps exactly the column's own
   width and padding, and a shadow with a huge spread paints the ink out to the
   viewport edges; the clip stops that spread leaking above and below. The
   arithmetic version of this — negative inline margins with matching percentage
   padding — put the content flush against the edge of a phone, because the
   percentage in the padding and the percentage in the margin were not resolving
   against the same box. This cannot drift: there is no second measurement to
   disagree with the first. */
.band{
  --paper:#E7E1D4;
  --panel:#F4F2ED;
  --rule:#CDC5B4;
  background:var(--paper);
  box-shadow:0 0 0 100vmax var(--paper);
  clip-path:inset(0 -100vmax);
}
@media (prefers-color-scheme:dark){
  .band{--paper:#1D1B18;--panel:#262320;--rule:#38332D}
}

/* type */
.eyebrow{
  font:500 16px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
}
/* The one big thing on the page. The lower bound is what a phone gets and does
   the most work: at 27px the headline sat barely above the copy and the whole
   hero read as a single block of text. */
h1{
  font-size:clamp(32px,5.2vw,50px);
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:600;
  max-width:22ch;
  text-wrap:balance;
}
/* The saying carries the page, so what follows it is two sentences rather than
   a paragraph. It stays at body size: the hierarchy is already carried by a
   56px headline above it, and shrinking the supporting copy as well only made
   it hard to read. */
.sub{margin-top:22px;font-size:17px;line-height:1.6;max-width:54ch}
.more{margin-top:26px;font-size:15px}
h2{font-size:19px;letter-spacing:-0.015em;font-weight:600;margin-bottom:11px}
/* home's later articles open with a peer heading, kept at h1 scale but below the
   page's single h1. Direct child only: the home also carries .cases and .grid,
   whose headings are sub-items and must keep their own smaller scale. */
body.home article > h2{font-size:clamp(30px,4.2vw,38px);line-height:1.15;letter-spacing:-0.025em;max-width:20ch;margin-bottom:0}
h3{font-size:14px;font-weight:600;margin-bottom:7px}
/* Body copy fills the column. It was capped at 66ch, which is ~590px against an
   860px .wrap, so text stopped short of the header, footer and figures. */
p{color:var(--muted)}
.lede{margin-top:18px;font-size:17px;line-height:1.55}
p + p{margin-top:12px}
strong{color:var(--ink);font-weight:600}

section + section{margin-top:26px}
/* a section following the lede or the card grid gets no margin from the rule
   above, so its h2 would crowd whatever precedes it */
.lede + section,
.grid + section{margin-top:26px}

.steps{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
}
.steps span{border:1px solid var(--rule);padding:8px 12px}
/* the elapsed time the four steps add up to, carried as the last step */
.steps .t{border-color:var(--accent);color:var(--accent)}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.card{position:relative;background:var(--panel);border:1px solid var(--rule);padding:18px 16px;transition:border-color .15s,background-color .15s}
.card p{font-size:14.5px;line-height:1.55}
/* module icon: ink relief with one accent gesture, generated by diagrams/mark.py */
.card > svg{display:block;width:38px;height:38px;margin-bottom:13px}
.card h3{display:flex;align-items:baseline;gap:8px}
.card h3 a{border:0;color:var(--ink);text-decoration:none}
/* the title link covers the whole card, so anywhere on it is clickable */
.card h3 a::after{content:"";position:absolute;inset:0}
.card h3::after{content:"→";margin-left:auto;color:var(--accent);opacity:.5;transition:transform .15s,opacity .15s}
.card:hover{border-color:var(--accent)}
.card:hover h3 a{color:var(--accent)}
.card:hover h3::after{opacity:1;transform:translateX(3px)}
.card:has(a:focus-visible){border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.card h3 a:focus-visible{outline:0}
@media (prefers-reduced-motion:reduce){.card,.card h3::after{transition:none}}

/* Worked cases stack in series, each taking the full column like any other
   section on the site. Side by side they were a two column grid whose cells
   were wildly different heights, so a short case left dead space beside a long
   one and a third landed as a widow on its own row. */
.cases{display:grid;grid-template-columns:1fr;gap:40px;margin-top:24px}
/* the home lists these as one-line examples rather than worked cases, so they
   sit three across, and take a smaller size to suit the narrower cell */
.cases.brief{grid-template-columns:repeat(3,1fr);gap:22px}
.cases.brief p{font-size:15px}
/* The sector glyph sits on the tag's own line rather than above it: at this
   size it reads as part of the label, and the cell keeps one left edge like
   everything else on the page. 24px is the floor — below it the 1.5px strokes
   fall under a device pixel and the glyph goes grey. */
.tagline{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.tagline svg{flex:none;width:24px;height:24px}
.tagline .tag{margin-bottom:0}
/* the grid gap does the separating here, so the stacked-section rhythm rule above
   must not also apply — inside a grid it just pushes the second cell's content down */
.cases > section + section{margin-top:0}
/* a case heading is a full-width section heading and takes the site's h2 scale;
   the rule remains only to hold the line-height, which the global h2 lacks */
.cases h2{line-height:1.3}
.fix{margin-top:14px;padding-left:13px;border-left:2px solid var(--accent)}
.fix strong{display:block;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.tag{
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:9px;
}

/* The proof block — the home's first figure, and the only one made of type
   rather than geometry. Premises above a rule and a conclusion below it is the
   one piece of logic every reader already owns, from arithmetic; the argument
   is made by breaking the rule, because the premises are all recorded and the
   conclusion is not. Type rather than SVG means it reflows on a phone instead
   of scrolling sideways, and the copy stays editable in the page. */
.proof{
  margin:30px auto 0;display:grid;gap:13px;max-width:52ch;
  background:var(--panel);border:1px solid var(--rule);padding:24px 26px 22px;
}
.proof .given{
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
}
.premises{list-style:none;display:grid;gap:6px}
.premises li{font-size:17px;line-height:1.45;color:var(--ink)}
/* two segments with the unwritten definition standing in the gap */
.infer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:11px}
.infer::before,.infer::after{content:"";height:1px;background:var(--ink)}
.infer i{display:block;width:13px;height:13px;border-radius:50%;border:2px solid var(--accent)}
.concl{display:flex;gap:11px;align-items:baseline;font-size:17px;line-height:1.45}
.concl .tf{color:var(--accent);font-size:20px;line-height:1;flex:none}
.proof figcaption{margin-top:0}

/* The reach pair — the same relief with its centre missing, then filled, and a
   drawn line crossing between them.
   It carries no caption. Beside the headline it is read as an illustration,
   and a picture that needs a label to work is not doing its job. */
.reach{display:flex;align-items:center;gap:2px}
.reach svg{display:block}
.reach > svg,.reach .is-closed{flex:none}
/* the closed relief is wrapped so the scroll animation has something to hook
   onto, so it needs sizing by the same rule as its unwrapped twin */
.reach > svg,.reach .is-closed svg{width:104px;height:104px}
.reach-arrow{flex:none}
.reach-arrow svg{width:88px;height:24px}
@media (max-width:860px){
  .reach > svg,.reach .is-closed svg{width:84px;height:84px}
  .reach-arrow svg{width:64px}
}
/* The arrow draws itself as the pair scrolls in, and the centre it points at
   arrives once it lands. Scroll-driven CSS rather than script: where the
   timeline is unsupported the figure simply renders finished, which is the
   state it has to hold anyway. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reach-arrow svg path{
      stroke-dasharray:1;
      animation:draw linear both;
      animation-timeline:view();
      animation-range:entry 15% entry 70%;
    }
    .is-closed svg path:last-child{
      transform-box:fill-box;transform-origin:center;
      animation:settle linear both;
      animation-timeline:view();
      animation-range:entry 50% entry 90%;
    }
  }
}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes settle{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}

/* The offer — the question mark set beside what we do about it. */
.offer{display:flex;gap:22px;align-items:flex-start;margin-top:28px;max-width:64ch}
.offer svg{display:block;width:52px;height:52px;flex:none;margin-top:2px}
.offer p{font-size:16px;line-height:1.6}

.crumb{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--muted);border:0;text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* About opening: text and tablet share the first argument. The tablet is an
   illustration, not a data diagram, so it scales down on mobile instead of
   forcing the page into a horizontal scroll. */
.about-opening{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  align-items:stretch;
  gap:34px;
  margin-top:18px;
}
.about-opening .lede{margin-top:0}
.about-tablet{
  position:relative;
  align-self:stretch;
  margin:0;
  min-height:0;
  overflow:visible;
}
.about-tablet svg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  object-fit:contain;
}
.about-opening + p{margin-top:18px}

/* figures — diagrams are inlined SVG so they inherit the tokens and the type stack */
figure{margin-top:26px}
/* width:100% against the max-width render.sh writes onto each svg: a diagram
   fills the column when it can and never scales its own labels up past 13px.
   Left-aligned rather than centred, so a diagram narrower than the column still
   shares its left edge with the text, the header and the footer. */
figure svg{display:block;width:100%;height:auto}
figure svg text{
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
figcaption{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted)}
figcaption b{
  display:block;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);
  margin-bottom:7px;font-weight:500;
}

.faq{margin-top:26px;border-top:1px solid var(--rule);padding-top:22px}
.faq h2{margin-bottom:16px}
.faq h3{margin-bottom:5px}
.faq div + div{margin-top:15px}
.faq p{font-size:15px}

.blog-list .lede{max-width:58ch}
.post-list{display:grid;gap:18px;margin-top:30px;border-top:1px solid var(--rule);padding-top:22px}
.post-card{margin:0}
.post-card h2{font-size:22px;line-height:1.25;margin-bottom:6px}
.post-card h2 a{border:0;text-decoration:none;color:var(--ink)}
.post-card h2 a:hover{color:var(--accent)}
.post-card p{font-size:15px}
.post .meta,.post-card .meta{
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;
}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
a:hover{color:var(--accent)}
.email{font-size:22px;letter-spacing:-0.01em;display:inline-block;margin-top:22px}

footer{
  border-top:1px solid var(--rule);
  padding:16px 0 22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);
}
footer a{color:var(--muted);border:0;text-decoration:none}
footer a:hover{color:var(--accent)}
.foot{display:flex;gap:20px;flex-wrap:wrap}
.foot a{font-size:13px}

@media (max-width:720px){
  main{padding:32px 0;align-items:flex-start}
  body.home main{justify-content:flex-start}
  /* The hero owns the first screen. Below the header it takes what is left and
     centres in it, so the second section starts just under the fold instead of
     the phone opening on one undifferentiated column of text. 170px is the
     header plus main's top padding plus enough of a margin that the next
     eyebrow peeks in and says there is more. The vh line is the fallback for
     browsers without svh; it overshoots by the toolbar's height, which pushes
     the fold down a little rather than breaking anything. */
  body.home .hero{
    min-height:calc(100vh - 170px);
    min-height:calc(100svh - 170px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:36px 0 40px;
    /* the figure drops below the copy: the headline has to own the top of the
       first screen, not share it */
    grid-template-columns:1fr;
    gap:34px;
  }
  .offer{gap:16px}
  .offer svg{width:42px;height:42px}
  /* the sections carry their own padding, so it is here that they tighten */
  .band{padding:46px 0 50px}
  .closing{padding:46px 0 56px}
  .grid,.cases{grid-template-columns:1fr;gap:14px}
  /* stacked, a worked case needs more air around it than the card grid does */
  .cases{gap:34px}
  /* .cases.brief outranks the rule above on specificity, so it collapses explicitly */
  .cases.brief{grid-template-columns:1fr;gap:18px}
  nav{gap:16px}
  /* diagrams scroll rather than shrink to unreadable */
  figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
  figure svg{min-width:500px}
  .about-opening{grid-template-columns:1fr;gap:18px}
  .about-tablet{width:min(300px,100%);height:170px;margin-top:0;overflow:visible}
  .about-tablet svg{min-width:0}
  /* the case figures are drawn at 420px and stay legible at phone width, so they
     scale down rather than forcing the case to scroll sideways */
  .cases figure{overflow-x:visible}
  .cases figure svg{min-width:0}
}

/* Org-authored content.
   Hugo renders Org special blocks as divs with a "-block" suffix, so these
   selectors mirror the original hand-written HTML structure without requiring
   page authors to write that structure directly. */
.hero-block{
  padding:54px 0 78px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:46px;
}
.band-block{padding:66px 0 72px}
.closing-block{padding:66px 0 78px;border-bottom:1px solid var(--rule)}
.band-block{
  --paper:#E7E1D4;
  --panel:#F4F2ED;
  --rule:#CDC5B4;
  background:var(--paper);
  box-shadow:0 0 0 100vmax var(--paper);
  clip-path:inset(0 -100vmax);
}
@media (prefers-color-scheme:dark){
  .band-block{--paper:#1D1B18;--panel:#262320;--rule:#38332D}
}
body.home .hero_text-block > .outline-2 > h2,
body.home .hero-text-block > .outline-2 > h2{
  font-size:clamp(32px,5.2vw,50px);
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:600;
  max-width:22ch;
  text-wrap:balance;
  margin-bottom:0;
}
body.home .band-block > .outline-2 > h2,
body.home .closing-block > .outline-2 > h2{
  font-size:clamp(30px,4.2vw,38px);
  line-height:1.15;
  letter-spacing:-0.025em;
  max-width:20ch;
  margin-bottom:0;
}

article > .outline-2 + .outline-2,
article > .lede + .outline-2,
article > .grid-block + .outline-2,
article > .fig-block + .outline-2{margin-top:26px}

.grid-block{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.card-block{
  position:relative;
  background:var(--panel);
  border:1px solid var(--rule);
  padding:18px 16px;
  transition:border-color .15s,background-color .15s;
}
.card-block p{font-size:14.5px;line-height:1.55}
.card-block > svg{display:block;width:38px;height:38px;margin-bottom:13px}
.card-block .outline-2 > h2{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  margin-bottom:7px;
}
.card-block .outline-2 > h2 a{border:0;color:var(--ink);text-decoration:none}
.card-block .outline-2 > h2 a::after{content:"";position:absolute;inset:0}
.card-block .outline-2 > h2::after{
  content:"→";
  margin-left:auto;
  color:var(--accent);
  opacity:.5;
  transition:transform .15s,opacity .15s;
}
.card-block:hover{border-color:var(--accent)}
.card-block:hover .outline-2 > h2 a{color:var(--accent)}
.card-block:hover .outline-2 > h2::after{opacity:1;transform:translateX(3px)}
.card-block:has(a:focus-visible){border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.card-block .outline-2 > h2 a:focus-visible{outline:0}
@media (prefers-reduced-motion:reduce){.card-block,.card-block .outline-2 > h2::after{transition:none}}

.cases-block,.cases_brief-block,.cases-brief-block{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  margin-top:24px;
}
.cases_brief-block,.cases-brief-block{grid-template-columns:repeat(3,1fr);gap:22px}
.cases_brief-block p,.cases-brief-block p{font-size:15px}
.case-block > .outline-2 > h2{line-height:1.3}
.tagline-block,.tagline_block{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}
.tagline-block svg,.tagline_block svg{flex:none;width:24px;height:24px}
.tagline-block .tag,.tagline_block .tag{margin-bottom:0}

.offer-block{display:flex;gap:22px;align-items:flex-start;margin-top:28px;max-width:64ch}
.offer-block svg{display:block;width:52px;height:52px;flex:none;margin-top:2px}
.offer-block p{font-size:16px;line-height:1.6}
.reach-block{display:flex;align-items:center;gap:2px}
.reach-block svg{display:block}
.reach-block > svg,.reach-block .is-closed,.reach-block .is_closed-block{flex:none}
.reach-block > svg,.reach-block .is-closed svg,.reach-block .is_closed-block svg{width:104px;height:104px}
.reach_arrow-block{flex:none}
.reach_arrow-block svg{width:88px;height:24px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reach_arrow-block svg path{
      stroke-dasharray:1;
      animation:draw linear both;
      animation-timeline:view();
      animation-range:entry 15% entry 70%;
    }
    .is_closed-block svg path:last-child{
      transform-box:fill-box;
      transform-origin:center;
      animation:settle linear both;
      animation-timeline:view();
      animation-range:entry 50% entry 90%;
    }
  }
}

.about_opening-block,.about-opening-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  align-items:stretch;
  gap:34px;
  margin-top:18px;
}
.about_opening-block .lede,.about-opening-block .lede{margin-top:0}
.about_tablet-block,.about-tablet-block{
  position:relative;
  align-self:stretch;
  margin:0;
  min-height:0;
  overflow:visible;
}
.about_tablet-block svg,.about-tablet-block svg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  object-fit:contain;
}
.about_opening-block + p,.about-opening-block + p{margin-top:18px}

.fig-block{margin-top:26px}
.fig-block svg{display:block;width:100%;height:auto}
.fig-block svg text{
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.fig-block > p:last-child{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted)}
.fig-block > p:last-child strong{
  display:block;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:7px;
  font-weight:500;
}

.faq-block{margin-top:26px;border-top:1px solid var(--rule);padding-top:22px}
.faq-block > .outline-2 > h2{margin-bottom:16px}
.faq-block .outline-3 > h3{margin-bottom:5px}
.faq-block .outline-3 + .outline-3{margin-top:15px}
.faq-block p{font-size:15px}
.related{font-size:14px}
.email a{font:inherit;letter-spacing:inherit}

@media (max-width:860px){
  .reach-block > svg,.reach-block .is-closed svg,.reach-block .is_closed-block svg{width:84px;height:84px}
  .reach_arrow-block svg{width:64px}
}

@media (max-width:720px){
  body.home .hero-block{
    min-height:calc(100vh - 170px);
    min-height:calc(100svh - 170px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:36px 0 40px;
    grid-template-columns:1fr;
    gap:34px;
  }
  .offer-block{gap:16px}
  .offer-block svg{width:42px;height:42px}
  .band-block{padding:46px 0 50px}
  .closing-block{padding:46px 0 56px}
  .grid-block,.cases-block{grid-template-columns:1fr;gap:14px}
  .cases-block{gap:34px}
  .cases_brief-block,.cases-brief-block{grid-template-columns:1fr;gap:18px}
  .fig-block{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fig-block svg{min-width:500px}
  .about_opening-block,.about-opening-block{grid-template-columns:1fr;gap:18px}
  .about_tablet-block,.about-tablet-block{width:min(300px,100%);height:170px;margin-top:0;overflow:visible}
  .about_tablet-block svg,.about-tablet-block svg{min-width:0}
  .cases-block .fig-block{overflow-x:visible}
  .cases-block .fig-block svg{min-width:0}
}