/* measuredcode - shared design code for all pages.
   Ported from docs/design-examples/assets/ms.css in the same order, so the cascade is the same. Selectors change
   only where block markup differs from the mockup's hand-written HTML; those places are marked "block markup". */
*{box-sizing:border-box}
html,body{margin:0;background:#E8E2D4}

/* In-page jumps glide instead of snapping. Anyone who has asked their system
   for less motion keeps the instant jump, which is the accessible default. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
/* leave a little air above a target so it does not sit flush against the edge */
[id]{scroll-margin-top:28px}
.ms-Y h1,.ms-Y h2,.ms-Y h3,.ms-Y p{margin:0}
.ms-Y a{text-decoration:none;color:inherit}
.ms-Y img{display:block;max-width:100%;height:auto}
/* block markup: figures, lists and the block wrappers carry browser and library spacing the mockup never had */
.ms-Y figure{margin:0}
.ms-Y :where(.wp-site-blocks > *, .wp-block-post-content > *){margin-block:0}
.ms-Y .screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;
  position:absolute;width:1px;word-wrap:normal}
/* the mockup relied on the browser's focus ring; the site draws one that shows on sand, paper and the dark band */
.ms-Y :focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* nav swap: inline list on wide screens, disclosure on phones */
.ms-Y .ms-corner .ms-menu{display:none}
.ms-Y .ms-corner .ms-navwide{display:flex}

/* ==================================================================
   10 - POSTER, CONTINUED.  One device all the way down: a line set to
   fill its measure. Only the size changes, so the page steps down from
   the poster instead of falling off it. Every size is fitted at runtime.
   ================================================================== */
.ms-Y{--sand:#E8E2D4;--pg:#FAF7F2;--ink:#14120F;--mut:#4A4338;--acc:#B3361B;--rl:#D9D1C0;
   color:var(--ink);font-family:"Archivo",sans-serif}
.ms-Y .ms-mono{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* block markup: fitted lines are headings or spans inside a heading, so the weight is reset; Archivo Black has
   one weight and a heading's bold would be synthesised */
.ms-Y .ms-fit{display:block;font-style:normal;font-weight:400;width:max-content;max-width:100%;font-size:clamp(1.9rem, 1rem + 4.2vw, 5rem);font-family:"Archivo Black",sans-serif;
  line-height:.94;letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap}
.ms-Y .ms-h1{font-weight:400}
.ms-Y .ms-acc{color:var(--acc)}
@media(max-width:760px){.ms-Y .ms-fit{white-space:normal;line-height:.96;width:auto}}
.ms-Y .ms-wrapY{padding:0 34px}
@media(max-width:760px){.ms-Y .ms-wrapY{padding:0 18px}}

/* rung 1 - the poster */
.ms-Y .ms-poster{background:var(--sand);height:68vh;min-height:400px;padding:26px 34px 22px;
  display:flex;flex-direction:column;justify-content:space-between}
@media(max-width:760px){.ms-Y .ms-poster{height:auto;min-height:0;padding:20px 18px 26px}}
.ms-Y .ms-corner{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
/* block markup: the navigation block wraps its links in a list */
.ms-Y .ms-corner .wp-block-navigation__container{display:flex;gap:18px;margin:0;padding:0;list-style:none}
.ms-Y .ms-corner .wp-block-navigation-item__content{display:block;padding:0;color:inherit;text-decoration:none}
.ms-Y .ms-corner .ms-r{color:var(--acc)}
/* the scroll hint belongs to the phone hero, which fills the screen; on a wide
   screen the next band is already visible and the hint reads as a stray label */
.ms-Y .ms-poster .ms-scroll{display:none}
@media(max-width:760px){.ms-Y .ms-poster .ms-scroll{display:inline-flex}}
.ms-Y .ms-type{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:12px 0}
/* the stack under the poster: listed, not ranked - WordPress leads by order alone.
   Items never break inside, so a wrapped line never starts with a separator */
.ms-Y .ms-stack{margin:28px 0 0;font-size:15px;letter-spacing:.1em;text-wrap:balance}
.ms-Y .ms-stack span{white-space:nowrap}
@media(max-width:760px){.ms-Y .ms-stack{margin-top:22px;font-size:12px}}

/* rung 2 - the missing middle, still on sand */
.ms-Y .ms-second{background:var(--sand);padding:0 34px 84px}
@media(max-width:760px){.ms-Y .ms-second{padding:0 18px 52px}}
.ms-Y .ms-second .ms-rule{border-top:2px solid var(--ink);padding-top:26px;margin-bottom:56px}
@media(max-width:820px){.ms-Y .ms-second .ms-rule{margin-bottom:36px}}
.ms-Y .ms-said{--fit-max:46;font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.08;
  text-transform:none;max-width:22ch}
/* the fork: one plain statement per audience. Lightness comes from fewer, larger words and
   air, not from rows - a title-plus-grey-sentence list here read as generated */
.ms-Y .ms-two{display:grid;grid-template-columns:1fr 1fr;gap:80px}
@media(max-width:820px){.ms-Y .ms-two{grid-template-columns:1fr;gap:48px}}
.ms-Y .ms-two .ms-kicker{margin-bottom:16px}
.ms-Y .ms-say{font-weight:700;letter-spacing:-.02em;line-height:1.18;font-size:clamp(1.35rem,.9rem + 1.2vw,2.05rem);max-width:22ch}
.ms-Y .ms-sub{color:var(--mut);font-size:1.05rem;line-height:1.65;margin-top:16px;max-width:40ch}
.ms-Y .ms-two .ms-linkbig{display:block;margin-top:28px}
.ms-Y .ms-two .ms-linkbig a{display:inline-block}

/* the wordmark reads as the company name, not as a caption */
.ms-Y .ms-wmk{font-family:"Archivo Black",sans-serif;font-size:1.5rem;letter-spacing:-.035em;
  text-transform:none;line-height:1;align-self:center}

/* ---- band A - thoughtbot: a row of real screens bleeding off both edges ---- */
.ms-Y .ms-bandA{background:var(--pg);padding:56px 0 40px}
/* block markup: the section label is an h2; the rule and its end tick are drawn by ::after instead of an <i> */
.ms-Y .ms-lab{display:flex;align-items:center;gap:16px;padding:0 34px;margin-bottom:30px;
  font-family:"Roboto Mono",monospace;font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;line-height:normal}
.ms-Y .ms-lab::after{content:"";flex:1;height:9px;
  background:linear-gradient(var(--ink),var(--ink)) 0 4px/100% 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/1px 9px no-repeat}
/* block markup: the row is the Query Loop's list, each card a list item */
.ms-Y .ms-bleed .wp-block-post-template{display:flex;gap:22px;overflow-x:auto;padding:0 34px 26px;margin:0;list-style:none;scroll-snap-type:x proximity;
  scroll-padding-left:34px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
/* the scrollbar is drawn as a thin rule inside the text margins, set apart from the captions: a wide grey bar
   right under them read as broken layout. Only the ::-webkit-scrollbar rules are used here, because
   scrollbar-width or scrollbar-color make Chrome ignore them and fall back to a hidden overlay bar */
.ms-Y .ms-bleed .wp-block-post-template::-webkit-scrollbar{height:3px}
.ms-Y .ms-bleed .wp-block-post-template::-webkit-scrollbar-track{background:var(--rl);margin:0 34px}
.ms-Y .ms-bleed .wp-block-post-template::-webkit-scrollbar-thumb{background:var(--ink)}
@supports not selector(::-webkit-scrollbar){.ms-Y .ms-bleed .wp-block-post-template{scrollbar-width:thin;scrollbar-color:var(--ink) var(--rl)}}
/* cards sized so three show whole and the edge of the next one says there is more */
.ms-Y .ms-bleed .wp-block-post{margin:0;flex:0 0 clamp(260px,28vw,400px);scroll-snap-align:start}
.ms-Y .ms-bleed .ms-shot img{width:100%;border:1px solid var(--rl)}
@media(max-width:760px){.ms-Y .ms-bleed .wp-block-post{flex:0 0 82%}.ms-Y .ms-bleed .wp-block-post-template{padding-left:18px}.ms-Y .ms-lab{padding:0 18px}}

/* ---- band B - Rareloop: each service is a hub of links, not a blurb ---- */
.ms-Y .ms-bandB{background:var(--pg);padding:24px 0 70px}
.ms-Y .ms-hubs{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:0 34px}
@media(max-width:860px){.ms-Y .ms-hubs{grid-template-columns:1fr;gap:30px;padding:0 18px}}
.ms-Y .ms-hub{border-top:2px solid var(--ink);padding-top:16px}
.ms-Y .ms-hub h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.ms-Y .ms-hub p{color:var(--mut);font-size:1.02rem;line-height:1.65;margin-bottom:16px}
.ms-Y .ms-hub ul{list-style:none;margin:0;padding:0}
.ms-Y .ms-hub li{display:flex;gap:10px;font-size:1rem;padding:9px 0;border-bottom:1px solid var(--rl);color:var(--ink)}
.ms-Y .ms-hub li::before{content:"";flex:0 0 14px;height:1px;background:var(--acc);margin-top:.72em}
/* the platform under each service, set like the stack line under the poster */
.ms-Y .ms-hub .ms-hubtag{font-size:12px;line-height:1.4;color:var(--ink);margin-bottom:12px}

/* ---- band C - Atomic Smash: a dark band carrying the claim ---- */
.ms-Y .ms-bandC{background:#14120F;color:#F5F1EA;padding:64px 34px 60px}
@media(max-width:760px){.ms-Y .ms-bandC{padding:52px 18px}}
.ms-Y .ms-bandC .ms-split{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
@media(max-width:900px){.ms-Y .ms-bandC .ms-split{grid-template-columns:1fr;gap:28px;align-items:start}}
.ms-Y .ms-bandC .ms-big{font-family:"Archivo Black",sans-serif;font-weight:400;text-transform:uppercase;line-height:.98;
  letter-spacing:-.035em;max-width:15ch;white-space:normal;width:auto;color:#FFFDF8;
  font-size:clamp(1.9rem,1.1rem + 2.6vw,3.4rem)}
.ms-Y .ms-bandC p{color:#BDB4A8;font-size:1.08rem;line-height:1.72;max-width:46ch;margin-top:0}
.ms-Y .ms-bandC .ms-gap{margin-top:18px}
/* block markup: the button is a link inside a paragraph */
.ms-Y .ms-bandC .ms-cta2{margin-top:30px}
.ms-Y .ms-bandC .ms-cta2 a{display:inline-block;background:var(--acc);color:#fff;
  padding:16px 28px;font-weight:700;font-size:1rem;line-height:normal}

/* ---- band D - Fresh Tilled Soil: bare columns, no chrome, LEARN MORE ---- */
.ms-Y .ms-bandD{background:var(--pg);padding:40px 34px 64px}
@media(max-width:760px){.ms-Y .ms-bandD{padding:36px 18px 44px}}
.ms-Y .ms-bandD h2{text-align:center;font-family:"Archivo Black",sans-serif;text-transform:uppercase;
  font-size:2.1rem;letter-spacing:-.03em;margin-bottom:48px}
/* block markup: the grid is the Query Loop's list, each person a list item */
.ms-Y .ms-bare .wp-block-post-template{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin:0;padding:0;list-style:none}
@media(max-width:860px){.ms-Y .ms-bare .wp-block-post-template{grid-template-columns:1fr;gap:32px}}
.ms-Y .ms-bare h3{font-size:1.5rem;font-weight:400;letter-spacing:-.01em;margin-bottom:12px}
.ms-Y .ms-bare p{color:var(--mut);font-size:1.02rem;line-height:1.7}

/* ---- footer - Fresh Tilled Soil: a three-column strip ---- */
.ms-Y .ms-footY a{display:block;text-decoration:underline;text-underline-offset:3px;padding:2px 0}

.ms-Y .ms-bare .wp-block-post-template{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px}
@media(max-width:900px){.ms-Y .ms-bare .wp-block-post-template{grid-template-columns:repeat(2,1fr);gap:34px 28px}}
@media(max-width:600px){.ms-Y .ms-bare .wp-block-post-template{grid-template-columns:1fr}}
.ms-Y .ms-bare .wp-block-post{border-top:none;padding-top:0;margin:0}
.ms-Y .ms-av{width:104px;height:104px;display:block;margin-bottom:16px;border:1px solid var(--rl)}
.ms-Y .ms-av img{width:100%;height:100%;object-fit:cover}
.ms-Y .ms-bare h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.ms-Y .ms-bare .ms-pos{color:var(--acc);font-weight:700;font-size:.98rem;margin-bottom:10px;line-height:1.35}
.ms-Y .ms-bare p{color:var(--mut);font-size:1.02rem;line-height:1.7}

.ms-Y .ms-footY{background:var(--pg);border-top:2px solid var(--ink);padding:56px 34px 34px;
  display:block;color:var(--mut);font-size:1rem}
@media(max-width:760px){.ms-Y .ms-footY{padding:34px 18px 26px}}
.ms-Y .ms-footmark{margin-bottom:34px}
.ms-Y .ms-footmark .ms-fit{text-transform:none;letter-spacing:-.04em;color:var(--ink)}
.ms-Y .ms-footgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;
  border-top:1px solid var(--rl);padding-top:28px}
@media(max-width:820px){.ms-Y .ms-footgrid{grid-template-columns:1fr;gap:28px}}
/* block markup: column titles are paragraphs, not h4 - they label links, they do not start sections */
.ms-Y .ms-footgrid .ms-foothead{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc);font-weight:400;margin:0 0 14px;line-height:normal}
.ms-Y .ms-footgrid p{line-height:1.7;max-width:40ch}
.ms-Y .ms-footgrid a{display:block;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:5px 0}
.ms-Y .ms-footgrid .ms-footlinks{list-style:none;margin:0;padding:0}
/* the studio address under the footer text; the form is not the only way in */
.ms-Y .ms-footgrid .ms-mail{margin-top:10px;line-height:normal}
.ms-Y .ms-footgrid .ms-mail a{width:fit-content}
.ms-Y .ms-footgrid .ms-footcta{margin-top:18px;line-height:normal}
/* on Contact the visitor is already where the button leads */
.ms-page-contact .ms-footgrid .ms-footcta{display:none}
.ms-Y .ms-footgrid .ms-footcta a{display:inline-block;background:var(--ink);color:var(--pg);
  padding:15px 26px;font-weight:700;text-decoration:none;font-size:1rem;line-height:1}
.ms-Y .ms-footbase{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--rl);margin-top:34px;padding-top:18px;font-size:.9rem}

/* ===== the process section ===== */
.ms-steps{background:var(--pg);padding:56px 0 64px}

/* the process on a drafting scale: a tick at each step. Each step is named by what the
   client gets at that stage, in words an agency and a business owner both read the same way */
.ms-Y .ms-ruler{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--ink);margin-top:8px}
.ms-Y .ms-ruler > div{position:relative;padding:22px 28px 0 0}
.ms-Y .ms-ruler > div::before{content:"";position:absolute;left:0;top:-2px;width:2px;height:14px;background:var(--ink)}
/* block markup: the step number is a paragraph, so the description rules skip it */
.ms-Y .ms-ruler .ms-num{display:block;font-family:"Roboto Mono",monospace;font-weight:400;font-size:12px;letter-spacing:.08em;color:var(--mut);padding-left:12px;line-height:normal}
.ms-Y .ms-ruler h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-top:10px}
.ms-Y .ms-ruler p:not(.ms-num){color:var(--mut);font-size:1rem;line-height:1.55;margin-top:6px;max-width:24ch}
/* on a narrow screen the scale turns vertical, ticks pointing right */
@media(max-width:820px){
  .ms-Y .ms-ruler{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--ink);margin-left:6px}
  .ms-Y .ms-ruler > div{padding:0 0 26px 22px}
  .ms-Y .ms-ruler > div::before{left:-2px;top:6px;width:14px;height:2px}
  .ms-Y .ms-ruler .ms-num{padding-left:0}
  .ms-Y .ms-ruler h3{margin-top:4px}
  .ms-Y .ms-ruler p:not(.ms-num){max-width:none}
}
/* the same scale standing upright at any width, for a narrow column such as the one beside the form */
.ms-Y .ms-ruler.ms-vert{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--ink);margin-left:6px}
.ms-Y .ms-ruler.ms-vert > div{padding:0 0 28px 22px}
.ms-Y .ms-ruler.ms-vert > div:last-child{padding-bottom:4px}
.ms-Y .ms-ruler.ms-vert > div::before{left:-2px;top:6px;width:14px;height:2px}
.ms-Y .ms-ruler.ms-vert .ms-num{padding-left:0}
.ms-Y .ms-ruler.ms-vert h3{margin-top:4px}
.ms-Y .ms-ruler.ms-vert p:not(.ms-num){max-width:none}
.ms-Y .ms-mailalt{margin-top:30px;color:var(--mut);font-size:1.02rem}
.ms-Y .ms-mailalt a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}
@media(max-width:760px){.ms-Y .ms-mailalt a{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0}}

/* ===== the brief form: Contact Form 7 markup set up by setup-studio.php ===== */
.ms-formband{background:var(--pg);padding:56px 0 70px}
/* the privacy policy: one column of running text */
.ms-Y .ms-proseband{background:var(--pg);padding:48px 0 70px}
.ms-Y .ms-prose{max-width:calc(68ch + 68px);font-size:1.05rem;line-height:1.7}
.ms-Y .ms-prose h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:40px 0 12px}
.ms-Y .ms-prose p{margin:0 0 14px}
.ms-Y .ms-prose ul{margin:0 0 14px;padding-left:1.2em}
.ms-Y .ms-prose li{margin-bottom:6px}
.ms-Y .ms-prose a{text-decoration:underline;text-underline-offset:3px}
.ms-formgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
@media(max-width:900px){.ms-formgrid{grid-template-columns:1fr;gap:32px}}
.ms-f{margin-bottom:22px}
.ms-f label{display:block;font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.ms-f label span{color:var(--acc)}
.ms-f input,.ms-f textarea{width:100%;padding:14px 14px;font:inherit;font-size:1.02rem;
  background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:0}
.ms-f textarea{min-height:150px;height:150px;resize:vertical}
.ms-f input:focus,.ms-f textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.ms-Y .ms-hint{color:var(--mut);font-size:.95rem;line-height:1.6;margin:0 0 22px}
.ms-submit{background:var(--ink);color:var(--pg);border:0;padding:16px 28px;font:inherit;
  font-weight:700;font-size:1rem;cursor:pointer}
.ms-submit:hover{background:#2c2822}
/* Contact Form 7 additions the mockup did not have: field messages, the result line and the spinner */
.ms-Y .wpcf7-form-control-wrap{display:block}
/* the Turnstile widget stays out of the layout unless Cloudflare asks for an interaction */
.ms-Y .ms-turnstile:has(.cf-turnstile iframe){margin-bottom:22px}
.ms-Y .ms-turnstile .cf-turnstile{max-width:100%}
.ms-Y .wpcf7-not-valid-tip{display:block;margin-top:6px;color:var(--acc);font-size:.95rem}
.ms-Y .ms-f .wpcf7-not-valid{border-color:var(--acc);border-width:2px}
/* the result line floats at the bottom of the screen, so it never pushes the page; it fades after a few seconds
   (webstudio-studio plugin, frontend.php) */
.ms-Y .wpcf7 form .wpcf7-response-output{position:fixed;z-index:50;left:50%;bottom:24px;transform:translateX(-50%);
  width:min(560px,calc(100% - 32px));margin:0;padding:14px 16px;border:1px solid var(--ink);color:var(--ink);
  background:#fff;box-shadow:0 6px 24px rgba(20,18,15,.18);transition:opacity .4s}
.ms-Y .wpcf7 form .wpcf7-response-output.ms-gone{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.ms-Y .wpcf7 form.invalid .wpcf7-response-output,.ms-Y .wpcf7 form.unaccepted .wpcf7-response-output,
.ms-Y .wpcf7 form.failed .wpcf7-response-output,.ms-Y .wpcf7 form.aborted .wpcf7-response-output,
.ms-Y .wpcf7 form.spam .wpcf7-response-output{border-color:var(--acc);border-width:2px}
/* the hidden spinner animates forever and forces a style recalculation on every frame; run it only while sending */
.ms-Y .wpcf7 form:not(.submitting) .wpcf7-spinner::before{animation:none}
/* the submit button is full width on a phone; the spinner beside it would wrap onto a line of its own */
@media(max-width:760px){.ms-Y .ms-form form{position:relative}.ms-Y .ms-form .wpcf7-spinner{position:absolute;bottom:14px;right:0;margin:0 14px}}
/* ===== short poster: the same opening as the home page, at page-title scale ===== */
.ms-Y .ms-poster.ms-sm{height:auto;min-height:0;padding:26px 34px 30px}
@media(max-width:760px){.ms-Y .ms-poster.ms-sm{padding:22px 18px 26px}}
.ms-Y .ms-poster.ms-sm .ms-type{flex:0 0 auto;padding:30px 0 18px}
.ms-Y .ms-poster.ms-sm .ms-fit{--fit-max:76}
.ms-Y .ms-poster.ms-sm .ms-corner a[aria-current]{color:var(--acc)}
.ms-Y .ms-lede{color:var(--mut);font-size:1.12rem;line-height:1.7;max-width:52ch;margin-top:4px}
/* a lede is a page excerpt and carries no link anywhere but the 404, where this is the way out */
.ms-Y .ms-lede a{text-decoration:underline;text-underline-offset:3px}
.ms-Y .ms-poster.ms-sm .ms-navrow{margin-top:26px}
/* the 404 has nothing under the poster, so the footer would otherwise take most of the screen. The poster takes the
   height the footer leaves instead, which puts the whole page on one screen wherever the footer fits on one; where it
   does not - the narrow layout stacks its three columns into roughly 950px - the poster keeps its own height and the
   page simply scrolls. Spreading four children apart would tear the lede off its heading, so the spare height goes
   above and below the pair: wordmark at the top, menu at the bottom, the message centred as on the home page. */
.ms-Y.error404 .wp-site-blocks{min-height:100svh;display:flex;flex-direction:column}
.ms-Y.error404 .wp-site-blocks > header{flex:1 1 auto;display:flex;flex-direction:column}
.ms-Y.error404 .ms-poster.ms-sm{flex:1 1 auto;justify-content:flex-start}
.ms-Y.error404 .ms-poster.ms-sm .ms-type{margin-top:auto}
.ms-Y.error404 .ms-poster.ms-sm .ms-lede{margin-bottom:auto}

/* a label inside a padded wrapper must not add the gutter twice */
.ms-Y .ms-wrapY .ms-lab{padding-left:0;padding-right:0}

/* ===== touch targets =====
   Nav and footer links were bare 12px text with no padding, far below the
   44px that a finger needs, so neighbouring items were easy to mis-tap. */
@media(max-width:760px){
  .ms-Y .ms-corner .wp-block-navigation__container{gap:4px 18px}
  .ms-Y .ms-corner .wp-block-navigation-item__content,
  .ms-Y .ms-footY a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;font-size:14px}
  .ms-Y .ms-footgrid a{min-height:44px}
  /* the page list stays one link per line; inline-flex alone ran the links together */
  .ms-Y .ms-footgrid :not(.ms-footcta) > a{display:flex}
  .ms-Y .ms-bandC .ms-cta2 a,
  .ms-Y .ms-footgrid .ms-footcta a,
  .ms-submit{min-height:52px;display:inline-flex;align-items:center;justify-content:center;
    padding-left:24px;padding-right:24px;width:100%}
  .ms-Y .ms-corner .ms-r{min-height:44px;display:inline-flex;align-items:center}
  .ms-Y .ms-scroll a{display:inline-flex;align-items:center;min-height:44px}
  /* the wordmark is a link home on the subpages, so it needs the same reach */
  .ms-Y .ms-wmk a{display:inline-flex;align-items:center;min-height:44px}
}

/* ===== phone layout =====
   space-between is a wide-screen behaviour: on a phone the corner rows have no
   spare width, so the two items just stack with a tight gap instead of being
   pushed apart and leaving a void. */
@media(max-width:760px){
  .ms-Y .ms-corner{flex-direction:column;align-items:flex-start;gap:0;justify-content:flex-start}
  /* align-self:center centres on the cross axis, which is horizontal once the
     row becomes a column, so the wordmark drifted to the middle */
  .ms-Y .ms-corner > *{align-self:flex-start}
  .ms-Y .ms-corner .wp-block-navigation__container{gap:0 16px;row-gap:0}
  .ms-Y .ms-poster{gap:8px}
  .ms-Y .ms-poster .ms-type{padding:14px 0}
  .ms-Y .ms-poster.ms-sm .ms-type{padding:14px 0 6px}
  .ms-Y .ms-lede{margin-top:10px}

  /* a 1280px screenshot shown at 277px is unreadable; give it the full gutter */
  .ms-Y .ms-bleed .wp-block-post-template{padding:0 18px 6px;gap:14px}
  .ms-Y .ms-bleed .wp-block-post{flex:0 0 92%}
  .ms-Y .ms-lab{gap:10px;flex-wrap:wrap}
  .ms-Y .ms-lab::after{min-width:40px}

  /* stacked bands do not need desktop-sized vertical padding */
  .ms-Y .ms-bandA{padding:38px 0 30px}
  .ms-Y .ms-bandB{padding:6px 0 44px}
  .ms-Y .ms-bandD{padding:36px 18px 44px}
}

/* ==================================================================
   PHONE. Not the desktop page made narrow: the screen itself becomes
   the poster, images run edge to edge, and the nav folds away.
   ================================================================== */
@media(max-width:760px){

  /* --- hero fills the screen, type fills the hero --- */
  .ms-Y .ms-poster{min-height:100svh;height:auto;padding:22px 18px 26px;gap:0;
    display:flex;flex-direction:column;justify-content:space-between}
  /* display:block is needed so the lines flow as one paragraph, which also
     disables the flex centring - auto block margins centre it instead */
  .ms-Y .ms-poster .ms-type{flex:0 1 auto;margin:auto 0;padding:18px 0}
  /* the three lines flow together as one wrapped block, sized to the screen */
  /* the cap is set by the longest word, not by the line: DEVELOPMENT is 11
     characters, and Archivo Black runs about .74em per uppercase character */
  .ms-Y .ms-poster .ms-fit{display:inline;width:auto;max-width:none;white-space:normal;
    overflow-wrap:break-word;font-size:clamp(1.9rem,10.4vw,3.6rem);line-height:1.04}
  .ms-Y .ms-poster .ms-fit::after{content:" "}
  .ms-Y .ms-poster .ms-type{display:block;overflow:visible}
  .ms-Y .ms-poster.ms-sm .ms-fit{font-size:clamp(2rem,10vw,3.4rem)}
  .ms-Y .ms-footmark .ms-fit{font-size:clamp(2rem,11vw,3.6rem);white-space:normal}
  .ms-Y .ms-poster.ms-sm{min-height:0}
  .ms-Y .ms-poster.ms-sm .ms-type{flex:0 0 auto;padding:16px 0 8px}

  /* --- nav folds into a disclosure, opened by a word, not an icon --- */
  .ms-Y .ms-corner .ms-navwide{display:none}
  .ms-Y .ms-corner .ms-menu{display:block;position:relative}
  .ms-Y .ms-menu > summary{display:inline-flex;align-items:center;min-height:44px;
    list-style:none;cursor:pointer;font-family:"Roboto Mono",monospace;font-size:14px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
    border-bottom:2px solid var(--ink);padding-bottom:2px}
  .ms-Y .ms-menu > summary::-webkit-details-marker{display:none}
  .ms-Y .ms-menu[open] > summary{color:var(--acc);border-bottom-color:var(--acc)}
  /* block markup: the column is the navigation list; items stretch so each link's rule runs full width */
  .ms-Y .ms-menu > .wp-block-navigation{display:block;padding-top:6px}
  .ms-Y .ms-menu .wp-block-navigation__container{flex-direction:column;align-items:stretch;gap:0}
  .ms-Y .ms-menu .wp-block-navigation-item{display:flex}
  .ms-Y .ms-menu .wp-block-navigation-item__content{flex:1;font-size:1.4rem;font-family:"Archivo Black",sans-serif;
    text-transform:none;letter-spacing:-.02em;min-height:52px;
    border-bottom:1px solid var(--rl)}

  /* --- the first project is shown, the rest are listed ---
     A full-bleed screenshot costs 337px of scroll each and is illegible at this
     width anyway, so only the first keeps one. Everything after it becomes a row
     with a square crop, which costs about a third as much and stays readable
     however many projects there are. */
  .ms-Y .ms-bleed .wp-block-post-template{flex-direction:column;overflow:visible;padding:0;gap:22px}
  .ms-Y .ms-bleed .wp-block-post{flex:0 0 auto;width:100%}
  .ms-Y .ms-bleed .wp-block-post:nth-child(n+2){display:grid;grid-template-columns:84px 1fr;
    gap:14px;align-items:center;padding:0 18px}
  .ms-Y .ms-bleed .wp-block-post:nth-child(n+2) .ms-shot img{height:84px;object-fit:cover;
    object-position:left top;border:1px solid var(--rl)}
  .ms-Y .ms-bleed .wp-block-post:nth-child(n+2) .ms-cap{padding:0;margin-top:0;line-height:1.5}
  .ms-Y .ms-bleed .ms-shot img{border-left:0;border-right:0}
  .ms-Y .ms-bleed .ms-cap{padding:0 18px}

  /* --- avatars sit beside the name rather than stacking into a long list --- */
  .ms-Y .ms-bare .wp-block-post-template{grid-template-columns:1fr;gap:26px}
  /* the avatar spans the name, role and text rows; otherwise the first row takes the avatar's
     height and the role drops far below the name */
  .ms-Y .ms-bare .wp-block-post{display:grid;grid-template-columns:72px 1fr;gap:0 16px;align-items:start;align-content:start}
  .ms-Y .ms-av{width:72px;height:72px;margin-bottom:0;grid-row:1 / span 3}
  .ms-Y .ms-bare h3{grid-column:2;margin-top:-2px}
  .ms-Y .ms-bare .ms-pos,.ms-Y .ms-bare .ms-desc{grid-column:2}
}

/* ===== the audience labels, and the evidence they can open ===== */
.ms-Y .ms-kicker{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);margin-bottom:8px}
/* block markup: the big link is a link inside a paragraph */
.ms-Y .ms-linkbig a{font-weight:700;font-size:1.06rem;border-bottom:2px solid var(--ink);
  padding-bottom:3px;white-space:nowrap}

/* each project is shown once: the caption under its screenshot carries the name, what kind of work
   it is - our product or a labelled demo - and links that name what they open */
.ms-Y .ms-bleed .ms-cap{font-family:"Archivo",sans-serif;text-transform:none;letter-spacing:0;color:var(--ink);margin-top:14px}
.ms-Y .ms-cap .ms-cap-name{display:block;font-size:1.06rem;font-weight:700;letter-spacing:0}
.ms-Y .ms-cap .ms-cap-kind{display:block;margin-top:3px;font-family:"Roboto Mono",monospace;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
/* block markup: the links are button blocks, reset to plain links */
.ms-Y .ms-cap .ms-cap-links{display:flex;flex-wrap:nowrap;gap:18px;margin-top:10px}
.ms-Y .ms-cap .wp-block-button__link,.ms-Y .ms-also .wp-block-button__link,.ms-Y .ms-idx .wp-block-button__link{display:inline;width:auto;padding:0 0 2px;background:none;border-radius:0;
  text-align:left;line-height:normal;
  font-size:.98rem;color:var(--acc);font-weight:700;white-space:nowrap;border-bottom:1px solid var(--acc)}
/* the mockup's caption links are flex items, so their padding and rule count in the row height */
.ms-Y .ms-cap .ms-cap-links .wp-block-button__link{display:block}
/* live work with a dated design gets a line, not a picture */
.ms-Y .ms-also{margin-top:34px;color:var(--mut);font-size:1.04rem;line-height:1.7}
/* block markup: one sentence assembled from the record - "Also live: <name>, <kind>. Site" */
.ms-Y .ms-also .wp-block-post-template{margin:0;padding:0;list-style:none}
.ms-Y .ms-also .wp-block-post > *{display:inline}
.ms-Y .ms-also .ms-also-name{color:var(--ink);font-weight:700;font-size:inherit;letter-spacing:0}
.ms-Y .ms-also .ms-also-name::after{content:",";font-weight:400;color:var(--mut)}
.ms-Y .ms-also .ms-also-kind::after{content:"."}
.ms-Y .ms-also .wp-block-buttons,.ms-Y .ms-also .wp-block-button{display:inline}
.ms-Y .ms-teamlink{display:none}
@media(max-width:820px){
  .ms-Y .ms-linkbig a{display:inline-flex;align-items:center;min-height:44px}
  .ms-Y .ms-two .ms-linkbig{margin-top:18px}
  .ms-Y .ms-two .ms-linkbig a{display:inline-flex}
}

/* the home page shows faces and names on a phone and sends the rest to About,
   where the full cards are; the About page keeps them */
@media(max-width:760px){
  .ms-Y .ms-cap .wp-block-button__link,.ms-Y .ms-also .wp-block-button__link,.ms-Y .ms-idx .wp-block-button__link{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0}
  .ms-Y .ms-bare.ms-faces .wp-block-post-template{grid-template-columns:repeat(3,1fr);gap:22px 10px}
  .ms-Y .ms-faces .wp-block-post{display:block;text-align:center}
  .ms-Y .ms-faces .ms-av{width:64px;height:64px;margin:0 auto 8px}
  .ms-Y .ms-faces h3{font-size:1rem;margin:0}
  .ms-Y .ms-faces .ms-pos,.ms-Y .ms-faces .ms-desc{display:none}
  .ms-Y .ms-teamlink{display:block;text-align:center;margin:30px 0 20px}
}

/* ==================================================================
   11 - THE WORK PAGE.  The same card as the home page - screenshot,
   name, what kind of work, links - laid out as a grid that fills the
   band instead of the sideways row, with a line of description added.
   ================================================================== */
/* the home page's work block sends the rest of the projects to the work page */
.ms-Y .ms-worklink{margin-top:26px}
.ms-Y .ms-idx{background:var(--pg);padding:40px 0 64px}
.ms-Y .ms-idx-band + .ms-idx-band{margin-top:54px}
/* block markup: the cards wrap instead of scrolling sideways */
.ms-Y .ms-grid .wp-block-post-template{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:36px 26px;margin:0;padding:0 34px;list-style:none}
.ms-Y .ms-grid .wp-block-post{margin:0}
/* every card is the same height above the caption: the shot is cropped to the top of the page */
.ms-Y .ms-grid .ms-shot img{width:100%;height:190px;object-fit:cover;object-position:top center;
  border:1px solid var(--rl)}
.ms-Y .ms-grid .ms-cap{font-family:"Archivo",sans-serif;text-transform:none;letter-spacing:0;color:var(--ink);margin-top:14px}
.ms-Y .ms-cap-note{margin-top:8px;color:var(--mut);font-size:1rem;line-height:1.6}
@media(max-width:760px){
  .ms-Y .ms-idx{padding:36px 0 44px}
  .ms-Y .ms-grid .wp-block-post-template{grid-template-columns:1fr;gap:30px;padding:0 18px}
  .ms-Y .ms-grid .ms-shot img{height:180px}
}