/* The MIDO Group · agency pages.
 *
 * Built from the Framer design ("Superfluous Three", branch main): one type and
 * colour system shared by the homepage, /work/, /services/web-design/,
 * /locations/minneapolis/ and /start/. Quiet finish on purpose: hairline rules,
 * outlined buttons, no shadows, glows or gradients.
 *
 * Breakpoints follow the Framer frames exactly: Desktop from 1440, Tablet
 * 810 to 1439, Phone below 810. The older pages keep site.css; nothing here
 * leaks into them because every rule hangs off body.ag.
 */

@font-face {
  font-family: "Apfel Grotezk";
  src: url("/assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("/assets/fonts/ApfelGrotezk-Mittel.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0B0A09;
  --ivory: #EDE7DC;
  --brass: #C2A15B;
  --rule: rgba(11, 10, 9, 0.18);
  --rule-on-ink: rgba(237, 231, 220, 0.25);
  --field: rgba(11, 10, 9, 0.3);

  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Apfel Grotezk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* The page gutter and the section rhythm, per breakpoint. */
  --gx: 76px;
  --sec-top: 150px;
  --sec-bot: 160px;
  --wrap: 1440px;
}

@media (max-width: 1439.98px) {
  :root { --gx: 48px; --sec-top: 112px; --sec-bot: 120px; }
}
@media (max-width: 809.98px) {
  :root { --gx: 26px; --sec-top: 94px; --sec-bot: 105px; }
}

/* ---------- base ---------- */

body.ag {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Resets carry no specificity (:where), so a component class always wins. */
:where(.ag) *, :where(.ag) *::before, :where(.ag) *::after { box-sizing: border-box; }
:where(.ag) img { display: block; max-width: 100%; }
:where(.ag) a { color: inherit; }
:where(.ag) :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.ag) :is(ul, ol) { padding: 0; list-style: none; }

.ag :focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ivory);
  padding: 12px 16px; z-index: 20;
  font: 500 11px/1.2 var(--mono); letter-spacing: 1.6px; text-transform: uppercase;
}
.skip:focus { left: 16px; top: 16px; }

/* A section is full bleed (so the ink bands reach the edges on wide screens);
   its content sits in a 1440 measure with the page gutter. */
.sec { border-top: 1px solid var(--rule); }
.sec--flush { border-top: 0; }
.sec--ink { background: var(--ink); color: var(--ivory); border-top: 0; }
.sec__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--sec-top) var(--gx) var(--sec-bot);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ---------- type ---------- */

.eyebrow {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.display {
  font-family: var(--display);
  font-weight: 500;
  font-size: 88px;
  line-height: 1.08;
  letter-spacing: -3px;
  text-wrap: balance;
}
.title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 58px;
  line-height: 1.12;
  letter-spacing: -2px;
}
.lede, .copy {
  font-size: 16px;
  line-height: 1.7;
  max-width: 620px;
  text-wrap: pretty;
}
.statement {
  font-family: var(--display);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.3;
  letter-spacing: 0;
}
.closing {
  font-family: var(--display);
  font-weight: 500;
  font-size: 70px;
  line-height: 1.1;
  letter-spacing: -2px;
  max-width: 950px;
}

@media (max-width: 1439.98px) {
  .display { font-size: 65px; letter-spacing: -2.5px; }
  .title { font-size: 46px; }
}
@media (max-width: 809.98px) {
  .display { font-size: 46px; letter-spacing: -3px; }
  .title { font-size: 36px; }
  .lede, .copy { font-size: 15px; }
  .closing { font-size: 46px; letter-spacing: -1.5px; }
}

/* ---------- buttons and links ---------- */

/* Outlined, always. The primary included: decided 1 Oct 2026, the filled
   brass button does not come back. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 21px;
  border: 1px solid rgba(11, 10, 9, 0.55);
  background: transparent;
  color: var(--ink);
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn--on-ink { border-color: rgba(237, 231, 220, 0.6); color: var(--ivory); }
.btn--on-ink:hover { border-color: var(--ivory); }

.tlink {
  font: 500 14px/1.2 var(--body);
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.tlink:hover { text-decoration-thickness: 2px; }

/* ---------- header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
}
.hdr__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--gx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* The Didone wordmark with the double-ring O stays the mark. */
.hdr__mark { display: block; flex: none; line-height: 0; }
.hdr__mark img { height: 23px; width: auto; }
.hdr__nav { display: flex; gap: 36px; }
.hdr__nav a {
  font: 500 14px/1.2 var(--body);
  letter-spacing: 0;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.hdr__nav a:hover, .hdr__nav a[aria-current] { border-bottom-color: currentColor; }

@media (max-width: 809.98px) {
  /* Stacked and centred, as the Phone frame has it. Not sticky down here: at
     this size the stacked header is a fifth of the screen. */
  .hdr { position: static; }
  .hdr__in { flex-direction: column; gap: 14px; padding: 20px var(--gx); }
  .hdr__nav { gap: 12px; flex-wrap: wrap; justify-content: center; }
}

/* ---------- footer ---------- */

.ftr { background: var(--ink); color: var(--ivory); }
.ftr__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 100px var(--gx) 46px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ftr__word {
  font-family: var(--display);
  font-weight: 500;
  font-size: 110px;
  line-height: 1;
  letter-spacing: 0;
}
.ftr__row {
  border-top: 1px solid var(--rule-on-ink);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
}
.ftr__row a { text-underline-offset: 3px; }
.ftr__fine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.5px;
  color: rgba(237, 231, 220, 0.6);
}
.ftr__fine a { text-decoration: none; }
.ftr__fine a:hover { color: var(--ivory); }

@media (max-width: 1439.98px) { .ftr__in { padding: 78px var(--gx) 40px; } }
@media (max-width: 809.98px) {
  .ftr__in { padding: 72px var(--gx) 36px; }
  .ftr__word { font-size: 74px; }
  .ftr__row { flex-direction: column; }
}

/* ---------- photographs ---------- */

/* The same quiet treatment the Framer frames apply to every photograph. */
.photo {
  overflow: hidden;
  background: #1a1816;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.98) contrast(0.94) grayscale(0.24) saturate(0.52);
}

/* ---------- case-study card ---------- */

.card { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.card[hidden] { display: none; }
.card .photo { height: 470px; }
.card__client {
  font-family: var(--display);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.card__client a { text-decoration: none; }
.card__client a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.card__built { max-width: 570px; }
.card__result {
  max-width: 570px;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 88px 42px;
  width: 100%;
}
.cards .card--wide { grid-column: span 2; }
.cards--auto { gap: 42px; }

@media (max-width: 809.98px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 58px; }
  .cards .card--wide { grid-column: auto; }
  .cards--auto { gap: 64px; }
  .card__built { font-size: 15px; }
}

/* ---------- homepage ---------- */

.open .sec__in { padding-top: 124px; padding-bottom: 0; gap: 62px; }
.open__copy { display: flex; flex-direction: column; gap: 26px; width: 100%; }
.open__copy .display { max-width: 1080px; }
.open__acts { display: flex; align-items: center; gap: 28px; }
.open__photo { width: 100%; height: 650px; }

.names .sec__in {
  padding-top: 44px;
  padding-bottom: 44px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.names { border-top: 0; border-bottom: 1px solid var(--rule); }
.names__list {
  font-family: var(--display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: 0;
}
.names__list span[aria-hidden] { color: rgba(11, 10, 9, 0.5); padding: 0 0.3em; }

.work .sec__in { gap: 60px; }
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; width: 100%; }
.work__head > div { display: flex; flex-direction: column; gap: 12px; }
.work__head p:last-child { font-size: 16px; line-height: 1.7; }

.svc .sec__in { gap: 60px; }
.svc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  width: 100%;
}
.svc__item { border-top: 1px solid var(--rule); padding: 30px 0; display: flex; flex-direction: column; gap: 16px; }
.svc__item h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0;
}
.svc__item h3 a { text-decoration: none; }
.svc__item h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.inds .sec__in { padding-top: 140px; padding-bottom: 150px; gap: 52px; }
.inds .title { max-width: 860px; }
.inds__list {
  width: 100%;
  border-top: 1px solid var(--rule-on-ink);
  border-bottom: 1px solid var(--rule-on-ink);
  padding: 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
}
.inds__list a { text-decoration: none; border-bottom: 1px solid var(--rule-on-ink); }
.inds__list a:hover { border-bottom-color: var(--ivory); }

.proof .sec__in { gap: 60px; }
.proof { border-top: 0; }
.proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: 100%; }
.proof__item { border-top: 1px solid var(--rule); padding: 26px 0; display: flex; flex-direction: column; gap: 12px; }
.proof__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 92px;
  line-height: 1;
  letter-spacing: 0;
}

.about .sec__in { gap: 38px; }
.about .title { max-width: 900px; }

.next .sec__in { gap: 40px; }
.next .closing { max-width: 900px; }
.sec--ink .closing { color: var(--ivory); }

@media (max-width: 1439.98px) {
  .open .sec__in { padding-top: 95px; gap: 52px; }
  .open__photo { height: 500px; }
  .names .sec__in { flex-direction: column; align-items: flex-start; padding-top: 34px; padding-bottom: 34px; }
  .work__head { flex-direction: column; align-items: flex-start; }
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inds .sec__in { padding-top: var(--sec-top); padding-bottom: var(--sec-bot); }
}
@media (max-width: 809.98px) {
  .open .sec__in { padding-top: 72px; gap: 46px; }
  .open__copy { gap: 22px; }
  .open__acts { flex-direction: column; align-items: flex-start; gap: 18px; }
  .open__photo { height: 300px; }
  .names .sec__in { gap: 14px; }
  .names__list { font-size: 20px; }
  .work .sec__in { gap: 38px; }
  .svc .sec__in { gap: 26px; }
  .svc__grid { grid-template-columns: minmax(0, 1fr); }
  .inds .title { font-size: 40px; letter-spacing: -1.5px; }
  .inds__list { gap: 14px 26px; font-size: 23px; }
  .proof__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---------- inner pages: shared intro ---------- */

.intro .sec__in { padding-top: 128px; padding-bottom: 150px; gap: 30px; }
/* Each Framer intro sets its own measure for the headline. */
.intro--web .display { max-width: 1050px; }
.intro--start .display { max-width: 1100px; }
.intro--city .display { max-width: 1120px; }
.intro--work .sec__in { padding-bottom: 92px; gap: 32px; }
.intro--start .sec__in { padding-bottom: 110px; gap: 28px; }
.intro--city .sec__in { padding-bottom: 145px; }
.intro__photo { width: 100%; height: 620px; }

@media (max-width: 1439.98px) {
  .intro .sec__in { padding-top: 100px; padding-bottom: 115px; }
  .intro--work .sec__in { padding-bottom: 90px; }
  .intro__photo { height: 480px; }
}
@media (max-width: 809.98px) {
  .intro .sec__in { padding-top: 72px; padding-bottom: 105px; }
  .intro--work .sec__in { padding-bottom: 72px; }
  .intro__photo { height: 300px; }
}

/* ---------- /work/ ---------- */

.grid .sec__in { padding-top: 40px; gap: 44px; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; width: 100%; }
.filters[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 10px; }
.filters .field { width: 280px; }
.input {
  width: 100%;
  height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--field);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 15px/1.2 var(--body);
  letter-spacing: 0;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: rgba(11, 10, 9, 0.5); }
.input:focus { outline: none; border-color: var(--ink); }
.filters__clear {
  background: none;
  border: 0;
  padding: 12px 4px;
  font: 500 14px/1.2 var(--body);
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
}
.filters__clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.cards__none { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding: 32px 0; }
.cards__none[hidden] { display: none; }

@media (max-width: 1439.98px) { .grid .sec__in { padding-top: 45px; } }
@media (max-width: 809.98px) {
  .grid .sec__in { padding-top: 40px; }
  .filters .field { width: 100%; }
}

/* ---------- /services/web-design/ and /locations/ ---------- */

.scope .sec__in { gap: 44px; }
.scope__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; width: 100%; }

.steps .sec__in { gap: 48px; }
.steps__list { width: 100%; }
.steps .statement { max-width: 860px; }

.related .sec__in { gap: 42px; }

.price .sec__in { padding-top: 110px; padding-bottom: 110px; gap: 20px; }
.price .statement { max-width: 850px; line-height: 1.35; }

.faq .sec__in { gap: 32px; }
.faq__list { width: 100%; display: flex; flex-direction: column; }
.faq__list dt, .faq__list dd { display: inline; }
.faq__list dt::after { content: "\00a0 /\00a0 "; }
.faq--spaced .faq__list { gap: 28px; }
.faq--spaced .faq__list > div { max-width: 760px; }

.closer .sec__in { gap: 30px; }

.city-work .sec__in { gap: 40px; }
.city-work .cards { gap: 42px; }
.city-svc .sec__in { gap: 42px; }
.city-svc__list {
  font-family: var(--display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0;
}
.city-svc__list a { text-decoration: none; }
.city-svc__list a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.city-svc__list span[aria-hidden] { color: rgba(11, 10, 9, 0.45); padding: 0 0.3em; }
.local .sec__in { gap: 32px; }
.local .title { color: var(--ivory); }

@media (max-width: 1439.98px) {
  .scope__list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .price .sec__in { padding-top: var(--sec-top); padding-bottom: var(--sec-bot); }
  .city-work .cards { gap: 36px; }
}
@media (max-width: 809.98px) {
  .city-work .cards { gap: 64px; }
  .city-svc__list { font-size: 26px; }
  .local .title, .closer .closing { font-size: 50px; }
}

/* ---------- /start/ ---------- */

.form-sec .sec__in { padding-top: 48px; padding-bottom: 150px; gap: 42px; }
.enq-form { display: flex; flex-direction: column; gap: 26px; width: 100%; max-width: 820px; }
.enq-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.enq-form .input { height: 50px; }
.enq-form textarea.input { height: 160px; padding: 14px; line-height: 1.5; resize: vertical; }
.enq-form select.input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.enq-form fieldset {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.enq-form legend { padding: 0; float: left; width: 100%; }
.enq-form__checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid rgba(11, 10, 9, 0.5);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--ivory);
  border-bottom: 1.5px solid var(--ivory);
  transform: translateY(-1px) rotate(-45deg);
}
.check input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.req { font-style: normal; color: rgba(11, 10, 9, 0.55); letter-spacing: 1px; }
.enq-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.enq__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq__msg { font-size: 15px; line-height: 1.5; max-width: 620px; }
.enq__msg:empty { display: none; }
.enq__msg[data-state="bad"] { border-left: 1px solid var(--ink); padding-left: 14px; }
.enq-form[data-sent="1"] .enq-form__foot .btn { display: none; }

.nextsteps .sec__in { gap: 44px; }
.nextsteps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; }
.nextsteps__item { border-top: 1px solid var(--rule); padding: 26px 0; display: flex; flex-direction: column; gap: 16px; }
.nextsteps__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 68px;
  line-height: 1.2;
  letter-spacing: 0;
}
.reply { font: 500 12px/1.2 var(--mono); letter-spacing: 0.5px; }

@media (max-width: 1439.98px) {
  .form-sec .sec__in { padding-top: 54px; padding-bottom: 125px; }
}
@media (max-width: 809.98px) {
  .form-sec .sec__in { padding-top: 48px; padding-bottom: 115px; }
  .enq-form__pair, .enq-form__checks { grid-template-columns: minmax(0, 1fr); }
  .nextsteps .sec__in { gap: 36px; }
  .nextsteps__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ag * { transition: none !important; scroll-behavior: auto !important; }
}