/* ==========================================================================
   UNICUS MARKETING — WHAT WE DO PAGE STYLESHEET
   File: /assets/css/what-we-do.css
   Version: 2.0
   ==========================================================================

   AI / DEVELOPER REFERENCE — APPROVED PAGE STANDARD

   PURPOSE
   This file contains only the presentation rules unique to what-we-do.php.
   It must load after /assets/css/global.css.

   REQUIRED PAGE HOOK
   The What We Do page body element must include:
   <body class="page-what-we-do">

   APPROVED FONT SYSTEM
   Display / headlines: "Bebas Neue", sans-serif
   Body / interface:    "Inter", Arial, sans-serif
   Font families are defined and loaded through the global foundation.

   APPROVED BRAND FOUNDATION
   Primary copper: #e48240
   Visual direction: dark, cinematic, precise, restrained

   ARCHITECTURE RULES
   - Keep every selector scoped beneath .page-what-we-do.
   - Keep only What We Do-page sections, imagery, layouts, and responsive rules here.
   - Do not duplicate resets, header, navigation, footer, shared buttons, or
     other sitewide components from global.css.
   - Do not place <style> tags in this file.
   - Do not move these rules into what-we-do.php.
   - Do not use inline CSS except for a legitimate dynamic value.
   - Preserve approved content and visual appearance during maintenance.
   - sections.css, style_dev.css, and template.css are retired.

   CONTENTS
   01. Page Foundation
   02. Temporary Markup Compatibility
   03. Hero Section
   04. Four Primary Capabilities
   05. Everything Required to Execute
   06. Connected Execution Model
   07. How Engagements Begin
   08. Final CTA
   09. Responsive Media Queries
   10. Reduced Motion
   ========================================================================== */

/* ==========================================================================
   01. Page Foundation
   ========================================================================== */

.page-what-we-do .page {
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

/* ==========================================================================
   02. Temporary Markup Compatibility
   These hooks keep the current PHP functional until what-we-do.php is replaced.
   Their values match the authoritative components in global.css.
   ========================================================================== */

.page-what-we-do .wrap {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.page-what-we-do .page h1,
.page-what-we-do .page h2,
.page-what-we-do .page h3 {
  text-transform: uppercase;
}

.page-what-we-do .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--hero-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--hero-eyebrow-spacing);
  line-height: 1;
  text-transform: uppercase;
}

.page-what-we-do .eyebrow::before {
  content: "";
  flex: 0 0 42px;
  width: 42px;
  height: 1px;
  background: var(--primary);
}

.page-what-we-do .eyebrow-center {
  justify-content: center;
}

.page-what-we-do .eyebrow-center::after {
  content: "";
  flex: 0 0 42px;
  width: 42px;
  height: 1px;
  background: currentColor;
}

.page-what-we-do .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--primary);
  color: var(--black-light);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--transition-standard),
    border-color var(--transition-standard),
    color var(--transition-standard),
    transform var(--transition-standard);
}

.page-what-we-do .cta-button:hover,
.page-what-we-do .cta-button:focus-visible {
  border-color: var(--primary-light);
  background: var(--primary-light);
  color: var(--black-light);
  transform: translateY(-1px);
}

.page-what-we-do .cta-button-outline {
  border-color: rgba(var(--white-rgb), .24);
  background: transparent;
  color: var(--white);
}

.page-what-we-do .cta-button-outline:hover,
.page-what-we-do .cta-button-outline:focus-visible {
  border-color: rgba(var(--white-rgb), .55);
  background: rgba(var(--white-rgb), .04);
  color: var(--white);
  transform: translateY(-1px);
}

.page-what-we-do .delay-1 {
  transition-delay: 100ms;
}

/* ==========================================================================
   03. Hero Section
   ========================================================================== */

.page-what-we-do .hero {
  position: relative;
  min-height: 63vh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--black);
}

.page-what-we-do .hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: url("../images/what-we-do-hero-background.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.78) contrast(1.08);
}

.page-what-we-do .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(var(--black-rgb), .96) 0%, rgba(var(--black-rgb), .83) 48%, rgba(var(--black-rgb), .30) 100%),
    linear-gradient(0deg, var(--black) 0%, rgba(var(--black-rgb), .45) 27%, transparent 63%);
}

.page-what-we-do .hero::after {
  position: absolute;
  right: -2%;
  bottom: -10%;
  z-index: -1;
  color: rgba(var(--white-rgb), .022);
  content: "WHAT WE DO";
  font: 700 clamp(210px, 26vw, 410px)/.8 var(--font-display);
  letter-spacing: -.05em;
  pointer-events: none;
}

.page-what-we-do .hero-inner {
  padding: 300px 0 58px;
}

.page-what-we-do .hero-copy {
  max-width: 940px;
}

.page-what-we-do .hero h1 {
  margin: 0 0 28px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--hero-heading-size);
  font-weight: 400;
  letter-spacing: var(--hero-heading-spacing);
  line-height: var(--hero-heading-line);
  text-transform: uppercase;
}

.page-what-we-do .hero h1 span {
  display: block;
  color: var(--primary);
}

.page-what-we-do .hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 800px) auto;
  gap: 58px;
  align-items: end;
  max-width: 1240px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--primary-rgb), .42);
}

.page-what-we-do .hero-foot p {
  margin: 0;
  color: var(--light-gray);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.68;
}

.page-what-we-do .hero-action {
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   04. Four Primary Capabilities
   ========================================================================== */

.page-what-we-do .builds {
  position: relative;
  padding: 145px 0 160px;
  background:
    radial-gradient(circle at 82% 10%, rgba(var(--primary-rgb), .07), transparent 26%),
    transparent;
}

.page-what-we-do .builds-head {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 78px;
}

.page-what-we-do .builds-head h2 {
  max-width: 800px;
  margin: 0;
  font-size: clamp(54px, 6.1vw, 100px);
  line-height: .89;
  letter-spacing: -.035em;
}

.page-what-we-do .builds-head h2 span {
  color: var(--primary);
}

.page-what-we-do .builds-intro {
  margin: 0 0 5px;
  color: var(--light-gray);
  font-size: 19px;
  line-height: 1.75;
}

.page-what-we-do .build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.page-what-we-do .build-card {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--panel);
}

.page-what-we-do .build-card-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-position: center;
  background-size: cover;
  opacity: .30;
  filter: saturate(.65) contrast(1.10);
  transition: transform .7s ease, opacity .4s ease;
}

.page-what-we-do .build-card:hover .build-card-image {
  transform: scale(1.035);
  opacity: .40;
}

.page-what-we-do .build-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(var(--black-rgb), .42), rgba(var(--black-rgb), .95) 66%),
    linear-gradient(90deg, rgba(var(--black-rgb), .72), transparent);
}

.page-what-we-do .build-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 100%;
  background: var(--primary);
}

.page-what-we-do .build-systems::after {
  width: 100%;
  height: 7px;
}

.page-what-we-do .build-companies::after {
  left: auto;
  right: 0;
}

.page-what-we-do .build-momentum::after {
  left: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 7px;
}

.page-what-we-do .build-card-inner {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 46px 50px 48px;
}

.page-what-we-do .build-label {
  display: block;
  margin-bottom: 17px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.page-what-we-do .build-card h3 {
  margin-bottom: 21px;
  font-size: clamp(48px, 4.8vw, 76px);
  line-height: .86;
  letter-spacing: -.03em;
}

.page-what-we-do .build-card h3 span {
  color: var(--primary);
}

.page-what-we-do .build-card-copy {
  max-width: 590px;
  margin-bottom: 27px;
  color: var(--light-gray);
  font-size: 16px;
  line-height: 1.7;
}

.page-what-we-do .chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-what-we-do .chip-list li {
  padding: 9px 11px;
  background: rgba(var(--white-rgb), .075);
  color: rgba(var(--white-rgb), .74);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.2;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   05. Everything Required to Execute
   ========================================================================== */

.page-what-we-do .create {
  position: relative;
  min-height: 980px;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: var(--black);
}

.page-what-we-do .create-image {
  position: absolute;
  inset: 0;
  z-index: -4;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.70) contrast(1.10);
}

.page-what-we-do .create::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(var(--black-rgb), .98) 0%, rgba(var(--black-rgb), .91) 45%, rgba(var(--black-rgb), .65) 100%),
    linear-gradient(0deg, var(--black), transparent 35%, rgba(var(--black-rgb), .65));
}

.page-what-we-do .create-grid {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(500px, 1fr);
  gap: clamp(70px, 8vw, 130px);
  align-items: center;
  padding: 140px 0;
}

.page-what-we-do .create-copy h2 {
  margin-bottom: 32px;
  font-size: clamp(55px, 6.2vw, 102px);
  line-height: .88;
  letter-spacing: -.035em;
}

.page-what-we-do .create-copy h2 span {
  color: var(--primary);
}

.page-what-we-do .create-lead {
  max-width: 650px;
  margin-bottom: 22px;
  color: var(--white);
  font-size: 22px;
  line-height: 1.62;
}

.page-what-we-do .create-body {
  max-width: 650px;
  margin: 0;
  color: var(--medium-gray);
  font-size: 16px;
  line-height: 1.8;
}

.page-what-we-do .capability-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.page-what-we-do .capability-group {
  min-height: 285px;
  padding: 30px;
  background: rgba(var(--black-rgb), .88);
  box-shadow: 0 24px 60px rgba(var(--black-rgb), .30);
  backdrop-filter: blur(10px);
}

.page-what-we-do .capability-group:nth-child(2),
.page-what-we-do .capability-group:nth-child(3) {
  background: rgba(var(--primary-rgb), .90);
  color: var(--black-light);
}

.page-what-we-do .capability-group small {
  display: block;
  margin-bottom: 15px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.page-what-we-do .capability-group:nth-child(2) small,
.page-what-we-do .capability-group:nth-child(3) small {
  color: rgba(var(--black-rgb), .62);
}

.page-what-we-do .capability-group h3 {
  margin-bottom: 19px;
  font-size: 29px;
  line-height: 1;
}

.page-what-we-do .capability-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-what-we-do .capability-group li {
  position: relative;
  padding: 5px 0 5px 14px;
  color: rgba(var(--white-rgb), .66);
  font-size: 12px;
  line-height: 1.42;
}

.page-what-we-do .capability-group:nth-child(2) li,
.page-what-we-do .capability-group:nth-child(3) li {
  color: rgba(var(--black-rgb), .72);
}

.page-what-we-do .capability-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  background: var(--primary);
}

.page-what-we-do .capability-group:nth-child(2) li::before,
.page-what-we-do .capability-group:nth-child(3) li::before {
  background: var(--black-light);
}

/* ==========================================================================
   06. Connected Execution Model
   ========================================================================== */

.page-what-we-do .connected {
  padding: 150px 0 165px;
  background:
    radial-gradient(circle at 50% 55%, rgba(var(--primary-rgb), .085), transparent 28%),
    var(--black-light);
}

.page-what-we-do .connected-head {
  max-width: 1040px;
  margin: 0 auto 88px;
  text-align: center;
}

.page-what-we-do .connected-head h2 {
  margin-bottom: 28px;
  font-size: clamp(52px, 5.9vw, 96px);
  line-height: .89;
  letter-spacing: -.035em;
}

.page-what-we-do .connected-head>p:last-child {
  max-width: 820px;
  margin: 0 auto;
  color: var(--light-gray);
  font-size: 18px;
  line-height: 1.75;
}

.page-what-we-do .connected-visual {
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px 90px;
  align-items: stretch;
}

.page-what-we-do .connected-card {
  position: relative;
  min-height: 210px;
  padding: 32px 35px;
  background: var(--panel);
  box-shadow: 0 28px 70px rgba(var(--black-rgb), .28);
}

.page-what-we-do .connected-card:nth-child(4),
.page-what-we-do .connected-card:nth-child(5) {
  background: #15110e;
}

.page-what-we-do .connected-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), .20));
}

.page-what-we-do .connected-left::after {
  left: 100%;
}

.page-what-we-do .connected-right::after {
  right: 100%;
  transform: rotate(180deg);
}

.page-what-we-do .connected-card small {
  display: block;
  margin-bottom: 14px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.page-what-we-do .connected-card h3 {
  margin-bottom: 12px;
  font-size: 34px;
  line-height: 1;
}

.page-what-we-do .connected-card p {
  margin: 0;
  color: var(--medium-gray);
  font-size: 14px;
  line-height: 1.64;
}

.page-what-we-do .connected-core {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px;
  background: var(--primary);
  color: var(--black-light);
  text-align: center;
  box-shadow: 0 0 0 18px rgba(var(--primary-rgb), .06), 0 0 100px rgba(var(--primary-rgb), .16);
}

.page-what-we-do .connected-core small {
  margin-bottom: 19px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.page-what-we-do .connected-core strong {
  font: 700 62px/.86 var(--font-display);
  text-transform: uppercase;
}

.page-what-we-do .connected-core span {
  max-width: 180px;
  margin-top: 20px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-what-we-do .connected-result {
  max-width: 920px;
  margin: 72px auto 0;
  padding: 31px 38px;
  background: rgba(var(--white-rgb), .045);
  text-align: center;
}

.page-what-we-do .connected-result span {
  display: block;
  margin-bottom: 10px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.page-what-we-do .connected-result strong {
  color: var(--white);
  font: 600 clamp(30px, 3vw, 46px)/1 var(--font-display);
  text-transform: uppercase;
}

/* ==========================================================================
   07. How Engagements Begin
   ========================================================================== */

.page-what-we-do .start {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: var(--black-light);
}

.page-what-we-do .start-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.65) contrast(1.10);
}

.page-what-we-do .start::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(var(--black-rgb), .97) 0%, rgba(var(--black-rgb), .86) 50%, rgba(var(--black-rgb), .40) 100%);
}

.page-what-we-do .start-inner {
  padding: 105px 0;
}

.page-what-we-do .start-copy {
  max-width: 850px;
  padding-left: 34px;
  border-left: 3px solid var(--primary);
}

.page-what-we-do .start h2 {
  margin-bottom: 27px;
  font-size: clamp(55px, 6.3vw, 102px);
  line-height: .87;
  letter-spacing: -.035em;
}

.page-what-we-do .start h2 span {
  color: var(--primary);
}

.page-what-we-do .start p {
  max-width: 780px;
  margin: 0;
  color: var(--light-gray);
  font-size: 19px;
  line-height: 1.75;
}

/* ==========================================================================
   08. Final CTA
   ========================================================================== */

.page-what-we-do .close {
  position: relative;
  overflow: hidden;
  padding: 125px 0 135px;
  background: var(--primary);
  color: var(--black-light);
  text-align: center;
}

.page-what-we-do .close-word {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  color: rgba(var(--black-rgb), .055);
  font: 700 clamp(230px, 32vw, 500px)/.9 var(--font-display);
  letter-spacing: -.06em;
  pointer-events: none;
}

.page-what-we-do .close-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.page-what-we-do .close .eyebrow {
  color: #392113;
}

.page-what-we-do .close h2 {
  margin: 0 auto 27px;
  font-size: clamp(58px, 7vw, 112px);
  line-height: .87;
  letter-spacing: -.04em;
}

.page-what-we-do .close-copy {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(var(--black-rgb), .74);
  font-size: 18px;
  line-height: 1.7;
}

.page-what-we-do .close-brand {
  margin: 28px auto 0;
  color: var(--black-light);
  font: 600 clamp(23px, 2.3vw, 36px)/1.18 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.page-what-we-do .close-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 39px;
}

.page-what-we-do .close .cta-button {
  border-color: var(--black-light);
  background: var(--black-light);
  color: var(--white);
}

.page-what-we-do .close .cta-button:hover {
  background: var(--white);
  color: var(--black-light);
}

.page-what-we-do .close .cta-button-outline {
  background: transparent;
  color: var(--black-light);
}

.page-what-we-do .close .cta-button-outline:hover {
  background: var(--black-light);
  color: var(--white);
}

/* ==========================================================================
   09. Responsive Media Queries
   ========================================================================== */

@media (max-width: 1180px) {
  .page-what-we-do .wrap {
    padding-inline: var(--site-gutter-tablet);
  }

  .page-what-we-do .hero-foot,
  .page-what-we-do .builds-head,
  .page-what-we-do .create-grid {
    grid-template-columns: 1fr;
  }

  .page-what-we-do .hero-action {
    justify-content: flex-start;
  }

  .page-what-we-do .create-grid {
    gap: 60px;
  }

  .page-what-we-do .capability-groups {
    max-width: 850px;
  }

  .page-what-we-do .connected-visual {
    grid-template-columns: 1fr 240px 1fr;
    gap: 18px 55px;
  }

  .page-what-we-do .connected-card::after {
    width: 55px;
  }
}

@media (max-width: 900px) {
  .page-what-we-do .build-grid {
    grid-template-columns: 1fr;
  }

  .page-what-we-do .build-card,
  .page-what-we-do .build-card-inner {
    min-height: 500px;
  }

  .page-what-we-do .connected-visual {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 15px;
  }

  .page-what-we-do .connected-core {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 230px;
  }

  .page-what-we-do .connected-card::after {
    display: none;
  }
}

@media (max-width: 680px) {
  .page-what-we-do .wrap {
    padding-inline: var(--site-gutter-mobile);
  }

  .page-what-we-do .hero {
    min-height: 900px;
  }

  .page-what-we-do .hero-inner {
    padding: 140px 0 74px;
  }

  .page-what-we-do .hero h1 {
    font-size: clamp(62px, 19vw, 94px);
  }

  .page-what-we-do .builds,
  .page-what-we-do .connected,
  .page-what-we-do .close {
    padding: 92px 0;
  }

  .page-what-we-do .builds-head {
    gap: 35px;
    margin-bottom: 55px;
  }

  .page-what-we-do .builds-head h2,
  .page-what-we-do .create-copy h2,
  .page-what-we-do .connected-head h2,
  .page-what-we-do .start h2,
  .page-what-we-do .close h2 {
    font-size: clamp(48px, 13.5vw, 74px);
  }

  .page-what-we-do .build-card,
  .page-what-we-do .build-card-inner {
    min-height: 560px;
  }

  .page-what-we-do .build-card-inner {
    padding: 38px 28px 40px;
  }

  .page-what-we-do .build-card h3 {
    font-size: clamp(46px, 13vw, 66px);
  }

  .page-what-we-do .create {
    min-height: auto;
  }

  .page-what-we-do .create-grid {
    padding: 92px 0;
  }

  .page-what-we-do .capability-groups,
  .page-what-we-do .connected-visual {
    grid-template-columns: 1fr;
  }

  .page-what-we-do .capability-group {
    min-height: auto;
  }

  .page-what-we-do .connected-core {
    grid-column: auto;
  }

  .page-what-we-do .start {
    min-height: 680px;
  }

  .page-what-we-do .start-inner {
    padding: 90px 0;
  }

  .page-what-we-do .start-copy {
    padding-left: 24px;
  }

  .page-what-we-do .close-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-what-we-do .close .cta-button {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .page-what-we-do .hero-copy {
    padding-inline: var(--site-gutter-tablet);
  }
}

@media (max-width: 760px) {
  .page-what-we-do .hero-copy {
    padding-inline: var(--site-gutter-mobile);
  }
}