/* ==========================================================================
   Logitech Consultants — content sections added from the website copy pack.
   These reuse the exported design tokens (colours, radii, type scale) so the
   new blocks sit inside the existing page rhythm rather than next to it.
   ========================================================================== */

.lc-sect {
  position: relative;
  padding: 0 0 150px;
  color: #f3ffc9;
}

.lc-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px;
}

.lc-head {
  max-width: 820px;
}

.lc-head--center {
  margin: 0 auto;
  text-align: center;
}

.lc-eyebrow {
  margin: 0 0 14px;
  color: rgba(243, 255, 201, 0.62);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lc-h2 {
  margin: 0;
  color: #f3ffc9;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lc-lede {
  margin: 18px 0 0;
  color: #bbc1a7;
  font-size: 17px;
  line-height: 1.6;
}

.lc-body p {
  margin: 0 0 16px;
  color: #bbc1a7;
  font-size: 17px;
  line-height: 1.6;
}

.lc-body p:last-child {
  margin-bottom: 0;
}

.lc-body strong {
  color: #f3ffc9;
  font-weight: 500;
}

/* Buttons ---------------------------------------------------------------- */

.lc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 16px 26px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lc-btn--primary {
  background-color: #f3ffc9;
  color: #161a18;
}

.lc-btn--primary:hover {
  background-color: #ee4a34;
  color: #161a18;
}

.lc-btn--ghost {
  border-color: rgba(243, 255, 201, 0.45);
  background-color: transparent;
  color: #f3ffc9;
}

.lc-btn--ghost:hover {
  border-color: #f3ffc9;
  background-color: rgba(243, 255, 201, 0.12);
}

.lc-btn:focus-visible {
  outline: 2px solid #ee4a34;
  outline-offset: 3px;
}

.lc-note {
  margin: 18px 0 0;
  color: rgba(243, 255, 201, 0.6);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* Cards ------------------------------------------------------------------ */

.lc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.lc-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid #2f3126;
  border-radius: 20px;
  background-color: #0e100f;
}

.lc-card h3 {
  margin: 0 0 12px;
  color: #f3ffc9;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.lc-card p {
  margin: 0;
  color: #bbc1a7;
  font-size: 15px;
  line-height: 1.6;
}

.lc-card .lc-card-index {
  display: block;
  margin: 0 0 18px;
  color: rgba(243, 255, 201, 0.5);
  font-size: 12px;
  letter-spacing: 0.14em;
}

/* Why Logitech ------------------------------------------------------------
   Four benefits as a two-column ledger rather than another row of cards: a
   rule per entry, a quiet index and one sentence each. */

.lc-why {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  max-width: 1040px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.lc-why li {
  padding: 20px 0 26px;
  border-top: 1px solid #2f3126;
}

.lc-why li:nth-child(1),
.lc-why li:nth-child(2) {
  border-top-color: #4b5140;
}

.lc-why__index {
  display: block;
  color: rgba(243, 255, 201, 0.45);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.lc-why h3 {
  margin: 10px 0 8px;
  color: #f3ffc9;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.lc-why p {
  max-width: 46ch;
  margin: 0;
  color: #a9b094;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .lc-why {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .lc-why li:nth-child(2) {
    border-top-color: #2f3126;
  }
}

/* Pull quote used for the featured principle (not a testimonial) -------- */

.lc-quote {
  margin: 40px 0 0;
  padding: 30px;
  border: 1px solid #2f3126;
  border-radius: 20px;
  background-color: rgba(243, 255, 201, 0.04);
}

.lc-quote p {
  margin: 0;
  color: #f3ffc9;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
}

.lc-quote figcaption {
  margin: 14px 0 0;
  color: rgba(243, 255, 201, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

/* Process steps --------------------------------------------------------- */

.lc-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lc-step;
}

.lc-steps > li {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 24px;
  border: 1px solid #2f3126;
  border-radius: 20px;
  background-color: #0e100f;
  counter-increment: lc-step;
}

.lc-steps > li::before {
  content: counter(lc-step, decimal-leading-zero);
  margin-bottom: 16px;
  color: rgba(243, 255, 201, 0.5);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.lc-steps h3 {
  margin: 0 0 8px;
  color: #f3ffc9;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

.lc-steps p {
  margin: 0;
  color: #bbc1a7;
  font-size: 14px;
  line-height: 1.6;
}

/* Industry / sector chips ----------------------------------------------- */

.lc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.lc-chips li {
  padding: 8px 14px;
  border: 1px solid rgba(243, 255, 201, 0.22);
  border-radius: 100px;
  color: #f3ffc9;
  font-size: 13px;
  line-height: 1.3;
}

/* Client strip: the exported logo ticker is replaced with sector labels,
   because template logos must not appear on the live site. The exported logo
   box is only 88x27, which is too small for a readable label, so the sector
   card is re-sized while keeping the original rounded shape. */
.framer-H6DTV {
  width: 200px !important;
  height: 60px !important;
}

.framer-H6DTV .framer-nadcnw {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

.lc-logo-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px 14px;
  border: 1px solid #2f3126;
  border-radius: 20px;
  background-color: #0e100f;
  color: #f3ffc9;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

/* The exported client ticker ships with opacity:0 inline, which hid the
   whole strip. Keep it visible and let it scroll if it overflows. */
.framer-ur9l83 > ul {
  opacity: 1 !important;
  transform: none !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.framer-ur9l83 > ul::-webkit-scrollbar {
  display: none;
}

/* Industry cards carry a short description under the sector name. */
.lc-ind-desc {
  margin: 8px 0 0;
  color: rgba(243, 255, 201, 0.78);
  font-size: 13px;
  line-height: 1.5;
}

/* Hero additions -------------------------------------------------------- */

.lc-hero-eyebrow {
  margin: 0 0 16px !important;
  color: rgba(243, 255, 201, 0.7);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lc-hero-lede {
  max-width: 640px;
  margin: 22px 0 0 !important;
  color: #d6dbc7;
  font-size: 17px;
  line-height: 1.6;
}

/* Enquiry form ---------------------------------------------------------- */

.lc-form {
  margin: 40px 0 0;
  padding: 30px;
  border: 1px solid #2f3126;
  border-radius: 20px;
  background-color: #0e100f;
}

.lc-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.lc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lc-field--wide {
  grid-column: 1 / -1;
}

.lc-field label {
  color: rgba(243, 255, 201, 0.7);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lc-field input,
.lc-field select,
.lc-field textarea {
  width: 100%;
  padding: 18px 20px;
  border: 1px solid #2f3126;
  border-radius: 10px;
  background-color: #000000;
  color: #f3ffc9;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.lc-field textarea {
  min-height: 140px;
  resize: vertical;
}

.lc-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #f3ffc9 50%), linear-gradient(135deg, #f3ffc9 50%, transparent 50%);
  background-position: calc(100% - 22px) 26px, calc(100% - 16px) 26px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.lc-field input:focus-visible,
.lc-field select:focus-visible,
.lc-field textarea:focus-visible {
  outline: 2px solid #f3ffc9;
  outline-offset: 2px;
}

.lc-field input::placeholder,
.lc-field textarea::placeholder {
  color: rgba(243, 255, 201, 0.4);
}

.lc-form .lc-actions {
  margin-top: 22px;
}

/* Two-column text + panel layouts --------------------------------------- */

.lc-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: start;
}

.lc-panel {
  padding: 28px;
  border: 1px solid #2f3126;
  border-radius: 20px;
  background-color: #0e100f;
}

.lc-panel h3 {
  margin: 0 0 10px;
  color: #f3ffc9;
  font-size: 18px;
  font-weight: 400;
}

.lc-panel p {
  margin: 0;
  color: #bbc1a7;
  font-size: 15px;
  line-height: 1.6;
}

.lc-stack {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 480px) {
  .framer-6x75wq .lc-btn {
    width: 100%;
  }
}

@media (max-width: 809px) {
  .lc-sect {
    padding-bottom: 90px;
  }

  .lc-wrap {
    padding: 0 20px;
  }

  .lc-form {
    padding: 22px;
  }

  .lc-card,
  .lc-quote {
    padding: 22px;
  }
}

.lc-hero-actions {
  justify-content: center;
}

/* Keep the consultation form clear of the fixed header when linked to. */
#consultation {
  scroll-margin-top: 110px;
}

/* --------------------------------------------------------------------------
   Project enquiry (contact page): the form sits in its own panel beside the
   explanation of what happens after it is sent, so it reads as a considered
   step rather than a wall of fields filling a whole screen.
   -------------------------------------------------------------------------- */

.lc-enquiry {
  padding-bottom: 140px;
}

.lc-enquiry-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  column-gap: 56px;
  padding: 48px;
  border-radius: 28px;
  background-color: #101312;
}

.lc-enquiry-intro {
  min-width: 0;
}

.lc-enquiry-next {
  display: grid;
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.lc-enquiry-next li {
  color: #bbc1a7;
  font-size: 16px;
  line-height: 1.6;
}

.lc-enquiry-next strong {
  display: block;
  margin-bottom: 2px;
  color: #f3ffc9;
  font-weight: 500;
}

.lc-enquiry-direct {
  margin: 30px 0 0;
  color: rgba(243, 255, 201, 0.62);
  font-size: 15px;
  line-height: 1.6;
}

.lc-enquiry-direct a {
  color: #f3ffc9;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lc-enquiry-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Form labels are set in sentence case at a readable size; the uppercase
   12px treatment belonged to the exported footer newsletter field. */
.lc-enquiry .lc-field label {
  color: rgba(243, 255, 201, 0.78);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.lc-enquiry .lc-field input,
.lc-enquiry .lc-field select,
.lc-enquiry .lc-field textarea {
  padding: 15px 16px;
}

/* A drawn chevron rather than the exported two-gradient triangle. */
.lc-enquiry .lc-field select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23f3ffc9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - 20px) 50%;
  background-size: 12px 8px;
  background-repeat: no-repeat;
}

.lc-req {
  color: rgba(243, 255, 201, 0.5);
}

.lc-enquiry .lc-actions {
  margin-top: 22px;
}

.lc-enquiry .lc-note {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: 0;
}

.lc-enquiry .lc-form-status:empty {
  margin: 0;
}

.lc-enquiry .lc-form-status {
  margin: 14px 0 0;
}

@media (max-width: 1023px) {
  .lc-enquiry-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 34px;
    padding: 34px;
  }

  .lc-enquiry-intro {
    max-width: 62ch;
  }
}

@media (max-width: 620px) {
  .lc-enquiry-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .lc-enquiry-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .lc-enquiry .lc-btn {
    width: 100%;
  }
}

/* FAQ answers: the export sets them at 14px, which is small for a paragraph
   and leaves the panel reading lighter than the rest of the page. */
[data-lc-accordion-panel] .framer-text {
  font-size: 16px;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Service previews (Explore Our Technology Services). Each service carries a
   4:1 banner: the crisp copy sits in the framed foreground card while the same
   banner, blurred and dimmed, fills the backdrop square so the layered export
   composition keeps its depth. Both swap together with a short crossfade when
   another service is opened.
   -------------------------------------------------------------------------- */

[data-framer-name="Right"] [data-framer-name="BG Image"],
[data-framer-name="Images"] [data-framer-name="BG Image"] {
  overflow: hidden;
}

/* The export frames the banner at its native 4:1 inside a panel that is 60px
   padded and much taller than the strip, so the photograph read as a thin
   line floating in empty space. The padding goes, the frame takes the whole
   panel, and the banner covers it instead of sitting inside it. */
[data-framer-name="Right"] .framer-4ty4fq,
[data-framer-name="Images"] .framer-16gkpil {
  padding: 0 !important;
}

/* The phone panel had no height of its own: the strip plus the 60px padding
   made it 172px tall. With both gone the panel takes a 16:9 frame instead. */
[data-framer-name="Images"] .framer-16gkpil {
  height: auto !important;
  aspect-ratio: 16 / 9;
}

[data-framer-name="Right"] .framer-16ud82r,
[data-framer-name="Images"] .framer-12y8h8n {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  flex: 1 1 auto;
  border-radius: inherit;
  overflow: hidden;
}

/* The phone frame ships at opacity 0 and only the blurred backdrop was ever
   painted, which is why the section looked image-less on a phone. */
[data-framer-name="Images"] .framer-12y8h8n {
  opacity: 1 !important;
}

[data-framer-name="Right"] .framer-16ud82r > div,
[data-framer-name="Images"] .framer-12y8h8n > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lc-service-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lc-service-img {
  transition: opacity 200ms ease;
}

.lc-service-bg {
  filter: blur(26px) brightness(0.55) saturate(1.05);
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .lc-service-img {
    transition: none;
  }
}

/* Project steps (From Requirement to Reliable Operation): the exported tab
   strip and stage cards stay untouched; they only gain a pointer cursor and a
   focus ring so the selectable stages announce themselves. */

[data-lc-steps] [data-lc-step],
[data-lc-steps] [data-lc-step-card] {
  cursor: pointer;
}

[data-lc-steps] [data-lc-step]:focus-visible,
[data-lc-steps] [data-lc-step-card]:focus-visible {
  outline: 2px solid #f3ffc9;
  outline-offset: 3px;
}

/* The exported icon+label pill was built for a wider column (207px fixed), so
   on the 127px desktop card it hung out of the left edge and the stage name
   rendered outside its own card. The pill now fills the card it belongs to and
   the label gets the room that is actually there, so every stage name draws
   whole, inside its card, at every breakpoint. */

[data-lc-steps] [data-lc-step-card] > div,
[data-lc-steps] [data-lc-step-card] > div > div {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
}

[data-lc-steps] [data-lc-step-card] > div > div {
  padding: 8px;
  gap: 8px;
}

[data-lc-steps] [data-lc-step-card] [data-framer-component-type="RichTextContainer"],
[data-lc-steps] [data-lc-step-card] [data-framer-component-type="RichTextContainer"] p {
  width: auto !important;
  min-width: 0;
}

[data-lc-steps] [data-lc-step-card] p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Service-hub content blocks added from the copy pack ------------------- */

.lc-h3-space {
  margin-top: 56px;
  font-size: clamp(22px, 2.2vw, 30px);
}

.lc-card h3 a,
.lc-card .lc-card-more a {
  color: inherit;
  text-decoration: none;
}

.lc-card h3 a:hover,
.lc-card h3 a:focus-visible,
.lc-card .lc-card-more a:hover,
.lc-card .lc-card-more a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(243, 255, 201, 0.55);
}

.lc-card-more {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.lc-card-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f3ffc9;
}

.lc-card h3 a:focus-visible,
.lc-card-more a:focus-visible {
  outline: 2px solid #f3ffc9;
  outline-offset: 3px;
}

.lc-sect .lc-steps h3 {
  font-size: 18px;
}

.lc-sect + .lc-sect {
  padding-top: 0;
}

/* The panel's Info row already holds the chips and the Explore button; let it
   grow instead of keeping the exported fixed height. */
#solutions [data-framer-name="Info"] {
  flex-wrap: wrap;
  height: auto !important;
}

/* Industry cards: the whole card is the link, and it carries only the sector
   name now that each card has its own photograph. */
.lc-ind-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lc-ind-card:focus-visible {
  outline: 2px solid #f3ffc9;
  outline-offset: 3px;
}

.lc-ind-card:hover .framer-48job8 [data-framer-name="Title"] p:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Sector rail -------------------------------------------------------------
   The export shows four of the ten cards and leaves the rest outside the
   frame. Tablet and desktop pin the section and walk the existing scroll rail
   sideways (motion.js), so every environment is on the page scroll; phones
   keep the rail's own swipe instead of ten screens of pinned travel.

   The section is pinned to the top of the window, so it becomes a stage: a
   full window tall, with its own headroom, instead of a short band that leaves
   the lower half of the screen empty while it holds. */
@media (min-width: 810px) {
  html.lc-motion section[data-framer-name="Industries"] {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(40px, 7vh, 84px);
  }
}

/* Touch targets: the hub cards' title and link are the tap area, so each one
   clears the 44px guidance without changing how the card looks. */
.lc-card h3 a {
  display: inline-block;
  padding: 9px 0;
}

.lc-card-more a {
  min-height: 44px;
  padding: 10px 0;
  margin: -10px 0;
}

/* Framer-exported footers on the service hubs: same touch-height rule. */
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* ==========================================================================
   Home page — hero grouping, client logo marquee, delivery staircase and
   the track-record band.

   Everything here is presentation only: the copy and the links above it stay
   exactly as the page markup has them.
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */

/* The headline, the context line and both buttons read as one block, so the
   calls to action sit with the message instead of in the opposite corner. */
.framer-c0vhsa .framer-19wm8vs {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 22px;
}

.framer-c0vhsa .framer-1xr3ccm {
  flex: none;
  width: 100%;
}

.framer-c0vhsa .framer-6x75wq {
  flex: none;
  width: auto;
  justify-content: flex-start;
}

/* The exported hero reserves a fixed 600px above the copy. With the context
   line added, that pushed the buttons past the fold on a laptop, so the space
   now follows the window height and stops growing on tall screens. */
@media (min-width: 1024px) {
  .framer-c0vhsa .framer-htv6gl {
    padding-top: clamp(240px, calc(100svh - 500px), 600px);
  }
}

.lc-hero-lede {
  margin: 0;
  max-width: 560px;
  color: #d6dcc2;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

/* Section rhythm --------------------------------------------------------- */

/* The exported sections carry 150px of tail. On a phone that reads as a gap
   rather than a pause, so the whole content rhythm tightens below 810px. */
@media (max-width: 809px) {
  .lc-sect {
    padding-bottom: 84px;
  }

  .lc-wrap {
    padding: 0 20px;
  }
}

/* ==========================================================================
   Home page — operating-environment index, client ribbon, track record and
   the five-stage delivery stair.

   Presentation only: the copy and the links stay as the markup has them.
   ========================================================================== */

/* The page's main element is a centred flex column, so a section holding a
   max-content track would otherwise size itself to the whole strip. */
.lc-sect,
.lc-record,
.lc-clients {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Operating environments -------------------------------------------------
   The numbered index the section was designed around: two columns of rows,
   each opening its own sector on the industries page. */

.lc-sectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  width: 100%;
  max-width: 1040px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  counter-reset: lc-sector;
  text-align: left;
}

.lc-sectors li {
  border-top: 1px solid #2f3126;
}

.lc-sectors li:nth-child(1),
.lc-sectors li:nth-child(2) {
  border-top-color: #4b5140;
}

.lc-sectors a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 2px;
  color: #f3ffc9;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
}

.lc-sectors a::before {
  counter-increment: lc-sector;
  content: counter(lc-sector, decimal-leading-zero);
  flex: none;
  width: 24px;
  color: rgba(243, 255, 201, 0.42);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.lc-sectors a:hover,
.lc-sectors a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(243, 255, 201, 0.5);
}

.lc-sectors a:focus-visible {
  outline: 2px solid #f3ffc9;
  outline-offset: 3px;
}

/* Section rhythm ---------------------------------------------------------- */

section[data-framer-name="Why Choose Us"] {
  padding-top: clamp(56px, 7vw, 96px);
}

section[data-framer-name="Client"] {
  padding-top: 0;
}

/* The client ribbon belongs to the sector story, so it follows the cards
   immediately rather than starting a new chapter lower down the page. */
section[data-framer-name="Industries"] {
  padding-bottom: 0;
}

/* Client cloud ------------------------------------------------------------
   A centred logo stage: the claim, a line of context and the nine client
   marks on white plates. A client mark is evidence, so it never leaves the
   page: the plates hold their colour until the pointer rests on one. */

.lc-clients {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 6.6vw, 104px) 0 clamp(52px, 6vw, 92px);
  border-top: 1px solid #23261f;
  background-color: #0b0d0a;
}

.lc-clients::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 360px;
  background: radial-gradient(
    62% 100% at 50% 0%,
    rgba(243, 255, 201, 0.06),
    rgba(243, 255, 201, 0) 72%
  );
  pointer-events: none;
  z-index: -1;
}

.lc-clients__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.lc-clients__title {
  margin: 0;
  max-width: 760px;
  color: #f3ffc9;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lc-clients__lede {
  margin: 0;
  max-width: 600px;
  color: #8f967c;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

.lc-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 18px);
  width: 100%;
  max-width: 1040px;
  margin: clamp(34px, 4.2vw, 56px) auto 0;
  padding: 0;
  list-style: none;
}

.lc-cloud__item {
  display: flex;
  flex: 0 0 calc(20% - 15px);
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.lc-cloud__plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(66px, 6vw, 86px);
  padding: 12px 16px;
  border-radius: 12px;
  background-color: #ffffff;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease;
}

.lc-cloud__plate img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.88;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.lc-cloud__name {
  color: #a9b094;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: center;
}

.lc-cloud__item:hover .lc-cloud__plate {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}

.lc-cloud__item:hover .lc-cloud__plate img {
  filter: none;
  opacity: 1;
}

/* Touch screens get the artwork in colour; there is no hover to reveal it. */
@media (hover: none) {
  .lc-cloud__plate img {
    filter: none;
    opacity: 1;
  }
}

@media (max-width: 1080px) {
  .lc-cloud {
    max-width: 720px;
  }

  .lc-cloud__item {
    flex-basis: calc(33.333% - 11px);
  }
}

@media (max-width: 700px) {
  .lc-clients {
    padding: 46px 0 50px;
  }

  .lc-clients__head {
    gap: 11px;
  }

  .lc-clients__title {
    font-size: 25px;
    line-height: 1.15;
  }

  .lc-clients__lede {
    font-size: 14px;
    line-height: 1.55;
  }

  .lc-cloud {
    gap: 10px;
    margin-top: 28px;
  }

  .lc-cloud__item {
    flex-basis: calc(33.333% - 7px);
    gap: 7px;
  }

  .lc-cloud__plate {
    height: 54px;
    padding: 8px 9px;
    border-radius: 9px;
  }

  .lc-cloud__name {
    font-size: 9.5px;
    line-height: 1.3;
  }
}

/* Track record -----------------------------------------------------------
   A lime panel that states the record in three chamfered photographs. The
   heading and the supporting copy sit side by side, the middle card drops,
   and each figure is set in the panel's own ink rather than in black. */

.lc-record {
  margin: 0 auto;
  padding: clamp(40px, 5vw, 76px) clamp(20px, 3.4vw, 52px) clamp(36px, 4.4vw, 64px);
  border-radius: clamp(20px, 2.2vw, 30px);
  background-color: #f3ffc9;
  color: #16200f;
}

.lc-record__inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}

.lc-record__top {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.lc-record__eyebrow {
  margin: 0 0 16px;
  color: rgba(22, 32, 15, 0.72);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lc-record__title {
  margin: 0;
  color: #16200f;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.lc-record__title span {
  display: block;
}

.lc-record__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lc-record__copy p {
  margin: 0;
  max-width: 520px;
  color: #2b3327;
  font-size: 16px;
  line-height: 1.55;
}

.lc-record__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(30px, 3.6vw, 56px);
  align-items: start;
}

/* Chamfered cards: a white hairline wraps the photograph, and the figure sits
   on a lime wash at the foot of the image. */
.lc-record__card {
  --lc-chamfer: polygon(
    64px 0,
    calc(100% - 14px) 0,
    calc(100% - 4px) 4px,
    100% 14px,
    100% calc(100% - 14px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 14px) 100%,
    14px 100%,
    4px calc(100% - 4px),
    0 calc(100% - 14px),
    0 64px
  );
  position: relative;
  height: clamp(310px, 27vw, 372px);
  padding: 1.5px;
  background-color: rgba(255, 255, 255, 0.85);
  clip-path: var(--lc-chamfer);
}

.lc-record__card--b {
  --lc-chamfer: polygon(
    0 14px,
    4px 4px,
    14px 0,
    calc(100% - 64px) 0,
    100% 64px,
    100% calc(100% - 14px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 14px) 100%,
    64px 100%,
    0 calc(100% - 64px)
  );
}

.lc-record__card--c {
  --lc-chamfer: polygon(
    0 14px,
    4px 4px,
    14px 0,
    calc(100% - 64px) 0,
    100% 64px,
    100% calc(100% - 64px),
    calc(100% - 64px) 100%,
    14px 100%,
    4px calc(100% - 4px),
    0 calc(100% - 14px)
  );
}

.lc-record__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: var(--lc-chamfer);
}

.lc-record__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(243, 255, 201, 0.99) 0%,
    rgba(243, 255, 201, 0.97) 26%,
    rgba(243, 255, 201, 0.72) 42%,
    rgba(243, 255, 201, 0.16) 62%,
    rgba(243, 255, 201, 0) 78%
  );
  pointer-events: none;
}

.lc-record__text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 78%;
  padding: 0 clamp(22px, 2.2vw, 30px) clamp(24px, 2.4vw, 32px);
}

.lc-record__card--b .lc-record__text {
  max-width: 82%;
  padding-left: clamp(40px, 3.6vw, 54px);
}

.lc-record__card--c .lc-record__text {
  max-width: 72%;
}

.lc-record__desc {
  margin: 12px 0 0;
  color: #2b3327;
  font-size: 14px;
  line-height: 1.45;
}

/* Delivery stair ---------------------------------------------------------
   Five stages climbing from the requirement to support: a chip per stage, a
   gradient line dropping from it, and the work of that stage written beside
   the line. Desktop lays the stages out as a staircase; below 1024px the same
   markup becomes an alternating flow with one line per stage. */

.lc-delivery {
  padding-top: clamp(64px, 7vw, 104px);
  padding-bottom: clamp(48px, 4.6vw, 68px);
}

.lc-delivery__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.lc-delivery__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 780px;
}

.lc-delivery__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 18px 9px 15px;
  border-radius: 36px;
  background-color: #f3ffc9;
  color: #161a18;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.lc-delivery__badge svg {
  flex: none;
}

.lc-delivery__title {
  margin: 0;
  color: #f3ffc9;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.lc-delivery__line {
  display: block;
}

.lc-delivery__line--grad {
  padding-bottom: 0.06em;
  background-image: linear-gradient(90deg, #f3ffc9 0%, #f0c9a8 42%, #ee4a34 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lc-delivery__lede {
  margin: 0;
  max-width: 560px;
  color: #9aa38a;
  font-size: 16px;
  line-height: 1.6;
}

.lc-delivery .lc-actions {
  margin: 0;
}

@media (min-width: 960px) {
  .lc-delivery__top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 56px;
  }

  .lc-delivery__head {
    flex: 1 1 auto;
  }

  .lc-delivery__top .lc-actions {
    flex: none;
    margin-bottom: 4px;
  }
}

.lc-stair {
  position: relative;
  width: 100%;
  max-width: 1188px;
  height: clamp(386px, 28.6vw, 430px);
  margin: clamp(38px, 4vw, 58px) auto 0;
  padding: 0;
  list-style: none;
}

.lc-stair__step {
  position: absolute;
  bottom: calc(2.6vw + var(--i) * 1.8vw);
  left: calc(var(--i) * 15.8%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15.8%;
}

.lc-stair__step:nth-child(1) {
  --i: 0;
}

.lc-stair__step:nth-child(2) {
  --i: 1;
}

.lc-stair__step:nth-child(3) {
  --i: 2;
}

.lc-stair__step:nth-child(4) {
  --i: 3;
}

.lc-stair__step:nth-child(5) {
  --i: 4;
}

/* Warm white rather than the lime fill: at this size the chips are the
   brightest marks on the page, and the ink stays readable on them. */
.lc-stair__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: clamp(10px, 0.85vw, 13px) clamp(16px, 1.35vw, 21px);
  border-radius: 100px;
  background-image: linear-gradient(135deg, #ffffff 0%, #eef3d8 100%);
  color: #16200f;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(12.5px, 1.02vw, 16px);
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.lc-stair__num {
  color: rgba(22, 32, 15, 0.48);
  font-size: 9.5px;
  letter-spacing: 0.12em;
}

.lc-stair__stem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.lc-stair__line {
  width: 1px;
  height: clamp(112px, 11.6vw, 158px);
  background-image: linear-gradient(
    180deg,
    #f3ffc9 0%,
    #e6c2a2 34%,
    rgba(238, 74, 52, 0.85) 76%,
    rgba(238, 74, 52, 0) 100%
  );
}

.lc-stair__items {
  position: absolute;
  top: 0.6vw;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 11vw;
  min-width: 104px;
  margin: 0 0 0 1.5vw;
  padding: 0;
  list-style: none;
  color: #a8b096;
  font-size: clamp(12px, 0.9vw, 13.5px);
  line-height: 1.3;
}

.lc-stair__items li {
  padding: 0.68vw 0.9vw;
  white-space: nowrap;
}

/* Motion helpers ---------------------------------------------------------
   The masks are what make the headings rise from behind their own baseline
   instead of sliding through empty space. */

.lc-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 96;
  width: 100%;
  height: 2px;
  background-image: linear-gradient(90deg, #f3ffc9 0%, #e7b9a0 58%, #ee4a34 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.lc-word,
.lc-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}

.lc-line {
  display: block;
}

.lc-word-inner,
.lc-line-inner {
  display: inline-block;
  will-change: transform;
}

/* Desktop composition ----------------------------------------------------- */

@media (min-width: 900px) {
  .lc-record__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 72px;
  }

  .lc-record__copy {
    flex: none;
    width: 44%;
    max-width: 500px;
    padding-top: 6px;
  }
}

@media (min-width: 768px) {
  .lc-record__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .lc-record__card--c {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .lc-record__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .lc-record__card--c {
    grid-column: auto;
  }

  /* The middle card drops, so the row reads as a composition. */
  .lc-record__card--b {
    margin-top: clamp(40px, 4.4vw, 68px);
  }
}

/* Phone and tablet -------------------------------------------------------
   The stair becomes an alternating flow: stages alternate left and right,
   each with its own line and the work of that stage beside it. */

@media (max-width: 1023px) {
  .lc-sectors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin-top: 32px;
  }

  .lc-stair {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;
    margin-top: 40px;
  }

  .lc-stair__step {
    position: static;
    align-items: flex-start;
    width: 100%;
  }

  .lc-stair__step:nth-child(even) {
    align-items: flex-end;
  }

  .lc-stair__stem {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
  }

  .lc-stair__step:nth-child(even) .lc-stair__stem {
    flex-direction: row-reverse;
  }

  .lc-stair__line {
    width: 1px;
    height: auto;
    min-height: 128px;
    align-self: stretch;
    margin-left: 22px;
  }

  .lc-stair__step:nth-child(even) .lc-stair__line {
    margin-right: 22px;
    margin-left: 0;
  }

  .lc-stair__items {
    position: static;
    align-items: flex-start;
    width: auto;
    min-width: 0;
    max-width: 64%;
    margin: 0;
    padding: 6px 0 6px 20px;
    font-size: 14px;
    text-align: left;
  }

  .lc-stair__items li {
    padding: 7px 0;
    white-space: normal;
  }

  .lc-stair__step:nth-child(even) .lc-stair__items {
    align-items: flex-end;
    padding: 6px 20px 6px 0;
    text-align: right;
  }

  .lc-stair__chip {
    font-size: 13.5px;
    padding: 11px 18px;
  }
}

@media (max-width: 719px) {
  section[data-framer-name="Why Choose Us"],
  .lc-delivery {
    padding-top: 48px;
  }

  .lc-sectors {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .lc-sectors a {
    padding: 14px 2px;
    font-size: 15px;
  }

  .lc-sectors li:nth-child(1) + li {
    border-top-color: #2f3126;
  }

  .lc-stair {
    gap: 8px;
    margin-top: 32px;
  }

  .lc-stair__line {
    min-height: 112px;
  }

  .lc-stair__line,
  .lc-stair__step:nth-child(even) .lc-stair__line {
    margin-right: 16px;
    margin-left: 16px;
  }

  .lc-stair__items {
    font-size: 13.5px;
    max-width: 66%;
    padding-left: 16px;
  }

  .lc-stair__step:nth-child(even) .lc-stair__items {
    padding-right: 16px;
    padding-left: 0;
  }

  .lc-record {
    width: calc(100% - 16px);
    padding: 36px 18px 30px;
    border-radius: 20px;
  }

  .lc-record__copy p {
    font-size: 15px;
  }

  .lc-record__grid {
    gap: 12px;
    margin-top: 26px;
  }

  .lc-record__card {
    height: 304px;
  }

  .lc-record__text {
    max-width: 88%;
    padding: 0 18px 20px;
  }

  .lc-record__card--b .lc-record__text,
  .lc-record__card--c .lc-record__text {
    max-width: 88%;
    padding-left: 30px;
  }

  /* The lower-left chamfer cuts into the caption's corner, so the middle
     card's text clears it. */
  .lc-record__card--b .lc-record__text {
    padding-bottom: 42px;
  }

  .lc-record__desc {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   Case studies
   One featured project leads with its client, requirement, scope and outcome
   in view; three supporting projects sit beneath it. The full list lives on
   the projects page.
   ========================================================================== */

.lc-work {
  padding: clamp(48px, 5.4vw, 84px) 0 clamp(72px, 8vw, 128px);
  border-top: 1px solid #1b1f1a;
  color: #f3ffc9;
}

/* On the projects page the hero above already closes the previous band. */
.lc-work--all {
  border-top: 0;
}

/* ==========================================================================
   Statement band
   A full-width photograph carries the one sentence the site is built on. The
   frame stays dark, but the quote sits left with the red spark that marks the
   delivery section, and the photograph drifts a little as it scrolls.
   ========================================================================== */

.framer-FyJGg .framer-9b67aq {
  min-height: clamp(300px, 28vw, 430px);
  padding: clamp(28px, 3.6vw, 60px);
}

.framer-FyJGg .framer-7zq4ek {
  background-color: transparent;
  background-image:
    linear-gradient(
      90deg,
      rgba(10, 13, 10, 0.86) 0%,
      rgba(10, 13, 10, 0.7) 38%,
      rgba(10, 13, 10, 0.16) 72%,
      rgba(10, 13, 10, 0.38) 100%
    ),
    linear-gradient(0deg, rgba(10, 13, 10, 0.35) 0%, rgba(10, 13, 10, 0) 60%);
}

.framer-FyJGg .framer-nhsw5i {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

.framer-FyJGg .framer-luf3z9 {
  max-width: min(780px, 78%);
  text-align: left;
}

.framer-FyJGg .framer-11oht1d h2 {
  max-width: 22ch;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(23px, 2.75vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.lc-statement__mark {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  line-height: 0;
}

.lc-statement__mark svg {
  display: block;
  width: clamp(22px, 2vw, 28px);
  height: auto;
}

/* Desktop: the statement is a single line beside the spark. The type is sized
   to the measure rather than the column, so it never wraps or clips. */
@media (min-width: 1200px) {
  .framer-FyJGg .framer-9b67aq {
    min-height: 0;
    padding: clamp(44px, 4.4vw, 64px);
  }

  .framer-FyJGg .framer-luf3z9 {
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 1.6vw, 24px);
    max-width: 100%;
  }

  .lc-statement__mark {
    flex: none;
    margin: 0;
  }

  .framer-FyJGg .framer-11oht1d h2 {
    max-width: none;
    font-size: clamp(17px, 1.58vw, 23px);
    line-height: 1.25;
    letter-spacing: -0.012em;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

@media (max-width: 809px) {
  .framer-FyJGg .framer-9b67aq {
    min-height: 300px;
  }

  .framer-FyJGg .framer-luf3z9 {
    max-width: 100%;
  }

  .framer-FyJGg .framer-11oht1d h2 {
    font-size: clamp(21px, 6vw, 27px);
  }

  .framer-FyJGg .framer-7zq4ek {
    background-image: linear-gradient(
      180deg,
      rgba(10, 13, 10, 0.66) 0%,
      rgba(10, 13, 10, 0.42) 55%,
      rgba(10, 13, 10, 0.72) 100%
    );
  }
}

.lc-work__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.lc-work__title {
  margin: 0;
  max-width: 12em;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.lc-work__lede {
  margin: 0;
  justify-self: end;
  max-width: 46ch;
  color: #a9ad9b;
  font-size: 15.5px;
  line-height: 1.6;
}

.lc-work__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #23271f;
  border-radius: 18px;
  background-color: #101310;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.lc-work__card:hover {
  border-color: rgba(243, 255, 201, 0.42);
  background-color: #141813;
}

.lc-work__card:focus-visible {
  outline: 2px solid #f3ffc9;
  outline-offset: 3px;
}

/* The featured project: photograph on one side, the story on the other. */

.lc-work__card--feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  margin-top: clamp(32px, 4vw, 52px);
}

.lc-work__card--feature .lc-work__media {
  height: 100%;
  min-height: 360px;
  aspect-ratio: auto;
}

.lc-work__card--feature .lc-work__media img {
  position: absolute;
  inset: 0;
}

.lc-work__card--feature .lc-work__body {
  justify-content: center;
  padding: clamp(24px, 2.4vw, 34px);
  gap: 12px;
}

.lc-work__card--feature .lc-work__more {
  margin-top: 0;
}

.lc-work__card--feature .lc-work__name {
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.12;
}

.lc-work__card--feature .lc-work__text {
  font-size: 15.5px;
}

.lc-work__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.lc-work__item {
  display: flex;
}

.lc-work__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #1b1f1a;
}

.lc-work__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.lc-work__card:hover .lc-work__media img {
  transform: scale(1.035);
  filter: saturate(1);
}

.lc-work__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  padding: 22px 22px 24px;
}

.lc-work__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lc-work__flag {
  padding: 4px 9px;
  border-radius: 100px;
  background-color: #f3ffc9;
  color: #16200f;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lc-work__tag {
  color: rgba(243, 255, 201, 0.6);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lc-work__name {
  margin: 0;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lc-work__client {
  margin: 0;
  color: #8f967c;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.lc-work__text {
  margin: 0;
  color: #a9ad9b;
  font-size: 14.5px;
  line-height: 1.55;
}

.lc-work__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.lc-work__chips li {
  padding: 5px 10px;
  border: 1px solid rgba(243, 255, 201, 0.22);
  border-radius: 100px;
  color: #c3c9ae;
  font-size: 11px;
  line-height: 1.2;
}

.lc-work__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  color: #f3ffc9;
  font-size: 13px;
  font-weight: 500;
}

.lc-work__arrow {
  transition: transform 0.25s ease;
}

.lc-work__card:hover .lc-work__arrow {
  transform: translate(2px, -2px);
  color: #ee4a34;
}

.lc-work__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: 26px;
  border-top: 1px solid #1f231d;
}

.lc-work__foot p {
  margin: 0;
  color: #8f967c;
  font-size: 14px;
  line-height: 1.5;
}

.lc-work__foot .lc-btn {
  min-height: 0;
  padding: 12px 22px;
  font-size: 14px;
}

@media (max-width: 1180px) {
  .lc-work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .lc-work__card--feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .lc-work__card--feature .lc-work__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 900px) {
  .lc-work__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .lc-work__lede {
    justify-self: start;
  }

  .lc-work__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  .lc-work__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    max-width: 600px;
  }

  /* The supporting projects become a compact index under the featured one. */

  .lc-work__card:not(.lc-work__card--feature) {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .lc-work__card:not(.lc-work__card--feature) .lc-work__media {
    height: 100%;
    aspect-ratio: auto;
  }

  .lc-work__card:not(.lc-work__card--feature) .lc-work__body {
    gap: 5px;
    padding: 15px 16px 16px;
  }

  .lc-work__card:not(.lc-work__card--feature) .lc-work__name {
    font-size: 17px;
    line-height: 1.25;
  }

  .lc-work__card:not(.lc-work__card--feature) .lc-work__text {
    display: none;
  }

  .lc-work__card:not(.lc-work__card--feature) .lc-work__more {
    padding-top: 9px;
    font-size: 12px;
  }

  .lc-work__card--feature .lc-work__media {
    aspect-ratio: 16 / 10;
  }

  .lc-work__card--feature .lc-work__body {
    justify-content: flex-start;
    padding: 22px;
  }
}
/* The track-record cards are case studies: the photograph keeps its lime
   wash, and the caption carries the sector, the project and the client. */

.lc-record__card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.lc-record__card:hover {
  transform: translateY(-3px);
}

.lc-record__card:focus-visible {
  outline: 2px solid #16200f;
  outline-offset: 4px;
}

.lc-record__tag {
  margin: 0 0 8px;
  color: #3f5626;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lc-record__name {
  margin: 0;
  color: #16200f;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.lc-record__card:hover .lc-record__name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.lc-record__actions {
  margin-top: clamp(26px, 3vw, 40px);
}

.lc-record__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 10px;
  background-color: #16200f;
  color: #f3ffc9;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.lc-record__cta:hover {
  background-color: #ee4a34;
  color: #161a18;
}

.lc-record__cta:focus-visible {
  outline: 2px solid #16200f;
  outline-offset: 4px;
}

.lc-record__cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.lc-record__cta:hover .lc-record__cta-arrow {
  transform: translate(2px, -2px);
}

/* Homepage statement ------------------------------------------------------ */

/* The statement card now sits on its own under the hero, so the container
   keeps a breathing space above it instead of the old card-block padding. */

section.framer-1py9mrt[data-lc-section="statement"] {
  padding: clamp(40px, 5vw, 64px) 0 0;
}