/* ============ The Print Guys: stitched from approved mockups ============ */
:root {
  --dark-950: #050c10;
  --dark-900: #050706;
  --dark-850: #060909;
  --teal-700: #0b6968;
  --teal-600: #0e7c7b;
  --teal-500: #159190;
  --teal-400: #2aa8a8;
  --teal-300: #4fb3b1;
  --gold-500: #c9a227;
  --gold-400: #d4b04a;
  --cream: #f2efe9;
  /* Warm uncoated-stock tone. Replaces the old cold #ebf3f6 pale blue, which
     read as dingy against the crisp white sections and turned the gold rules
     and icon circles olive. This sits in the same warm family as --cream and
     the marble brand wall, so the light bands read as one material. */
  --paper: #f1ece1;
  --paper-top: #f7f4ed;
  --paper-line: rgba(122, 96, 44, 0.24);
  --light: #f4f6f5;
  --white: #fdfefe;
  --ink-900: #16201e;
  --ink-600: #4a5553;
  --ink-400: #77837f;
  --line-light: #e2e7e5;
  --line-dark: rgba(255, 255, 255, 0.12);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Outfit", "Segoe UI", sans-serif;
  --shadow-card: 0 2px 6px rgba(12, 24, 22, 0.05), 0 14px 34px rgba(12, 24, 22, 0.09);
  --shadow-card-hover: 0 4px 10px rgba(12, 24, 22, 0.07), 0 22px 46px rgba(12, 24, 22, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink-600);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
.container { width: min(1240px, 100% - 48px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

svg.ic, svg.arrow, svg.caret, svg.trust-ic {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.arrow { width: 18px; height: 18px; }
.caret { width: 14px; height: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 400; font-size: 15px;
  padding: 14px 28px; border-radius: 999px; white-space: nowrap;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.btn .arrow { transition: transform 0.25s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-solid { background: var(--teal-600); color: #fff; }
.btn-solid:hover { background: var(--teal-500); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.btn-nav { padding: 11px 24px; font-size: 14.5px; }

/* ---------- Kickers & section heads ---------- */
.kicker {
  font-size: 13px; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--teal-600);
  display: flex; align-items: center; gap: 14px;
}
.kicker-dark { color: var(--teal-300); }
.kicker-line { display: inline-block; width: 34px; height: 1px; background: currentColor; opacity: 0.8; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head .kicker { justify-content: center; }
.section-head h2 {
  font-family: var(--serif); font-weight: 500; color: var(--ink-900);
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.15; margin-top: 14px;
}
.head-rule { display: block; width: 54px; height: 2px; background: var(--teal-400); margin: 20px auto 0; }
.section-sub { margin-top: 18px; font-size: 16.5px; color: var(--ink-600); }

.sparkle-rule, .why-div { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.sparkle-rule .line, .why-div .line { width: 52px; height: 1px; background: var(--gold-500); opacity: 0.55; }
.sparkle-rule .diamond, .why-div .diamond {
  width: 7px; height: 7px; background: var(--gold-500); transform: rotate(45deg);
}

/* ---------- Utility bar ---------- */
.utilbar { background: var(--dark-950); color: #cfd8d6; font-size: 13px; }
.utilbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; }
.utilbar .ic { width: 14px; height: 14px; color: var(--teal-300); flex: none; }
.utilbar-usps { display: flex; list-style: none; align-items: center; gap: 18px; }
.utilbar-usps li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.utilbar-usps .sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.18); }
.utilbar-help { display: flex; align-items: center; gap: 20px; }
.utilbar-help a { display: flex; align-items: center; gap: 7px; color: #e6ecea; white-space: nowrap; }
.utilbar-help a:hover { color: var(--teal-300); }
.help-label { color: #97a4a1; }

/* ---------- Nav ---------- */
.nav { background: #fff; position: sticky; top: 0; z-index: 60; transition: box-shadow 0.3s; }
.nav.scrolled { box-shadow: 0 6px 24px rgba(10, 15, 14, 0.1); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
.nav-logo img { width: 196px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > a, .nav-drop > a {
  font-size: 15px; font-weight: 400; color: var(--ink-900); white-space: nowrap;
  padding: 10px 12px; display: flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent; transition: color 0.2s;
}
.nav-links > a:hover, .nav-drop > a:hover { color: var(--teal-600); }
.nav-links > a.active { color: var(--teal-600); border-bottom-color: var(--teal-600); }
.nav-drop { position: relative; }
.drop-menu {
  position: absolute; top: 100%; left: 0; min-width: 235px;
  background: #fff; border-radius: 12px; padding: 10px;
  box-shadow: 0 12px 40px rgba(10, 15, 14, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop-menu a { display: block; padding: 9px 14px; font-size: 14.5px; color: var(--ink-900); border-radius: 8px; }
.drop-menu a:hover { background: var(--light); color: var(--teal-600); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { padding: 9px; color: var(--ink-900); display: flex; border-radius: 50%; transition: color 0.2s; }
.icon-btn:hover { color: var(--teal-600); }
.icon-btn .ic { width: 21px; height: 21px; }
.cart { position: relative; }
.cart-badge {
  position: absolute; top: 2px; right: 0;
  background: var(--teal-600); color: #fff; font-size: 10px; font-weight: 500;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--dark-900); color: #fff; overflow: hidden; }
.hero-img {
  position: absolute; inset: 0 0 0 auto; width: 68%; max-width: 1000px;
  background: url("assets/hero.jpg") right center / cover no-repeat;
}
.hero-img::before {
  content: ""; position: absolute; inset: -2px 0 -2px -2px;
  background:
    linear-gradient(90deg, var(--dark-900) 0%, var(--dark-900) 24%, rgba(5, 7, 6, 0.45) 55%, rgba(5, 7, 6, 0) 100%),
    linear-gradient(0deg, rgba(5, 7, 6, 0.85) 0%, rgba(5, 7, 6, 0) 30%);
}
.hero-inner { position: relative; z-index: 1; padding: 88px 0 56px; }
.hero-copy { max-width: 560px; }
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(44px, 6.4vw, 78px); line-height: 1.08;
  margin-top: 22px; letter-spacing: 0.01em;
}
.hero h1 em { color: var(--teal-400); font-style: italic; font-weight: 500; }
.hero-rule { display: block; width: 84px; height: 1px; background: rgba(255, 255, 255, 0.4); margin: 30px 0 26px; }
.hero-sub { font-size: 17px; color: #cbd5d2; max-width: 420px; line-height: 1.7; }
.hero-ctas { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust {
  position: relative; z-index: 1;
  display: flex; gap: clamp(18px, 3vw, 44px);
  padding-top: 26px; padding-bottom: 44px; flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 13px; padding-right: clamp(18px, 3vw, 44px); border-right: 1px solid rgba(255, 255, 255, 0.16); }
.trust-item:last-child { border-right: none; padding-right: 0; }
.trust-ic { width: 34px; height: 34px; color: var(--teal-300); flex: none; stroke-width: 1.3; }
.trust-item strong { display: block; font-weight: 500; font-size: 15px; color: #fff; line-height: 1.35; }
.trust-item span { font-size: 13px; color: #9fb0ac; }

/* ---------- Services ---------- */
.services { background: var(--light); padding: 96px 0 104px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.svc-card {
  position: relative; background: #fff; border-radius: 6px; overflow: visible;
  box-shadow: var(--shadow-card); transition: transform 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.svc-photo { border-radius: 6px 6px 0 0; overflow: hidden; aspect-ratio: 323 / 200; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.svc-card:hover .svc-photo img { transform: scale(1.05); }
.svc-ic {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: var(--teal-700); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  margin: -31px 0 0 22px; position: relative; z-index: 1;
}
.svc-body { padding: 16px 24px 24px; }
.svc-ic svg { width: 27px; height: 27px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc-body h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--ink-900); margin-bottom: 8px; }
.svc-body p { font-size: 14.5px; line-height: 1.55; }
.svc-arrow { display: inline-flex; margin-top: 14px; color: var(--teal-600); }
.svc-card:hover .svc-arrow .arrow { transform: translateX(4px); }

/* Eighth tile in the 4x2 services grid. There are exactly seven real
   categories, so rather than invent an eighth service this slot routes to the
   full catalogue. Photoless and quiet on purpose, so it reads as a way through
   rather than as another product card. */
.svc-card--all {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  box-shadow: none;
  justify-content: center;
}
.svc-card--all:hover { box-shadow: var(--shadow-card); background: #fff; }
.svc-card--all .svc-ic {
  background: transparent; border: 1px solid var(--teal-600);
  margin: 0 0 0 24px; width: 54px; height: 54px;
}
.svc-card--all .svc-ic svg { stroke: var(--teal-600); width: 24px; height: 24px; }
.svc-card--all .svc-body { padding: 18px 24px 26px; }

/* ---------- Why choose ----------
   Treated as a single sheet of warm uncoated stock laid into the page: a soft
   top-to-bottom warm gradient rather than a flat slab, seated by a hairline
   at each seam. The column rules are tapered (they fade out at both ends)
   so the four columns read as an editorial spec sheet instead of a table. */
.why {
  background: linear-gradient(180deg, var(--paper-top) 0%, var(--paper) 46%, var(--paper) 100%);
  padding: 92px 0 84px;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.why .section-head { margin-bottom: 46px; }
.why .section-head h2 { font-size: clamp(34px, 4.8vw, 54px); }

/* Rebuilt as an editorial index rather than an icon row.
   The previous version stacked three quiet decorative devices in one narrow
   column: a large thin ring around each icon, a gold diamond divider, and a
   vertical hairline between columns. All three sat at the same hairline weight
   and the same low contrast, so nothing anchored and the whole band read as a
   stock "why choose us" template.

   Now there is exactly ONE device, a solid accent rule at the head of each
   column, and exactly ONE anchor, a large serif numeral in the brand teal.
   Type carries the hierarchy: a 72px numeral against 15.5px body copy is real
   contrast, where a hairline ring against a hairline diamond was none.
   Left aligned on purpose; four centred icon columns is the template look Nick
   rejected. The gold is gone from this band entirely rather than dying on a
   pale ground; it still carries the brand wall and the dark sections, where it
   has something to sing against. */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); }
.why-col {
  text-align: left;
  padding-top: 22px;
  border-top: 2px solid var(--teal-600);
}
.why-num {
  display: block;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(58px, 6.2vw, 94px); line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}
.why-col h3 {
  font-family: var(--serif); font-weight: 500; font-size: 23px;
  color: var(--ink-900); margin: 20px 0 10px;
}
.why-col p { font-size: 15.5px; line-height: 1.65; color: #4d5754; max-width: 30ch; }

/* ---------- Featured work ---------- */
.work { background: var(--dark-850); color: #fff; padding: 96px 0 104px; }
.work .section-head h2 { color: #fff; }
.work .section-sub { color: #a7b4b1; }
.work .kicker-center { justify-content: center; }
.work-tabs {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  flex-wrap: wrap; margin-bottom: 44px;
}
.tab {
  font-size: 15px; font-weight: 300; color: #b9c4c1;
  padding: 10px 22px; border-bottom: 2px solid transparent; transition: color 0.2s;
}
.tab:hover { color: #fff; }
.tab.active { color: var(--teal-400); border-bottom-color: var(--teal-400); }
.tab-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.18); }
.work-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1.16fr 1fr 1fr 1.08fr;
  grid-auto-rows: 220px; grid-auto-flow: dense;
}
.work-item { border-radius: 4px; overflow: hidden; position: relative; }
.work-item.tall { grid-row: span 2; }
.work-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.work-item:hover img { transform: scale(1.045); }
.work-item.hidden { display: none; }
.work-cta { text-align: center; margin-top: 46px; }

/* ---------- Brands ---------- */
.brands {
  background: var(--cream) url("assets/brands-bg.jpg") center / cover;
  padding: 100px 0 110px;
}
.brands .section-head { margin-bottom: 64px; }
.brands .section-head h2 { font-size: clamp(34px, 5vw, 56px); }
.brand-row { display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); }
.brand-arrow {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(160, 132, 52, 0.55); color: #8a7430;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.brand-arrow:hover { background: var(--gold-500); border-color: var(--gold-500); color: #fff; }
.brand-track {
  display: flex; align-items: center; flex: 1;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.brand-track::-webkit-scrollbar { display: none; }
.brand-cell {
  flex: 0 0 calc(100% / 6); min-width: 150px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 20px; border-right: 1px solid rgba(22, 32, 30, 0.12);
}
.brand-cell:last-child { border-right: none; }
.brand-cell img { max-height: 92px; width: auto; max-width: 100%; mix-blend-mode: multiply; }

/* Trust wall: all 15 real clients shown at once instead of six behind a
   carousel. These are the strongest trust asset on the site, so nothing is
   hidden behind an arrow. The arrows stay in the DOM (script.js binds to them
   without a null guard) but are hidden, and the track stops scrolling because
   it no longer overflows. */
.brand-row--wall { display: block; }
.brand-row--wall .brand-arrow { display: none; }
.brand-row--wall .brand-track {
  display: grid; grid-template-columns: repeat(5, 1fr);
  overflow: visible; gap: 0;
  border-top: 1px solid rgba(22, 32, 30, 0.12);
  border-left: 1px solid rgba(22, 32, 30, 0.12);
}
.brand-row--wall .brand-cell {
  flex: none; min-width: 0; padding: 20px 24px; min-height: 158px;
  border-right: 1px solid rgba(22, 32, 30, 0.12);
  border-bottom: 1px solid rgba(22, 32, 30, 0.12);
}
/* The legacy client logos are 500x530 canvases with generous padding baked in,
   so the mark needs a large box before it reads at a glance. */
.brand-row--wall .brand-cell img {
  max-height: 118px; mix-blend-mode: multiply;
  transition: transform 0.3s;
}
.brand-row--wall .brand-cell:hover img { transform: scale(1.05); }
/* Two of the fifteen client marks are white artwork on a solid black canvas.
   Multiply cannot neutralise black, so they would read as black rectangles
   dropped on the cream. A dark tile lets each mark show exactly as supplied,
   with no recolouring of anyone's logo. */
.brand-row--wall .brand-cell--dark {
  background: #000; padding: 0;
  position: relative; overflow: hidden;
}
/* The file carries a lighter ring of resize artefacts at its outer edge, so
   letting the black canvas cover the whole tile hides that seam and lets the
   mark sit larger. Both marks are centred with wide margins, so nothing is
   clipped. Taken out of flow so a filled tile cannot drive its grid row taller
   than the plain tiles beside it. */
.brand-row--wall .brand-cell--dark img {
  mix-blend-mode: normal;
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-height: none; object-fit: cover;
}

@media (max-width: 1080px) { .brand-row--wall .brand-track { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) {
  .brand-row--wall .brand-track { grid-template-columns: repeat(3, 1fr); }
  .brand-row--wall .brand-cell { min-height: 124px; padding: 16px 18px; }
  .brand-row--wall .brand-cell img { max-height: 82px; }
}
@media (max-width: 560px) {
  .brand-row--wall .brand-track { grid-template-columns: repeat(2, 1fr); }
  .brand-row--wall .brand-cell { min-height: 108px; padding: 12px 14px; }
  .brand-row--wall .brand-cell img { max-height: 68px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--dark-950); color: #b7c2bf; font-size: 15px; }
.footer-cols {
  display: grid; grid-template-columns: 1.35fr 0.95fr 1fr 0.7fr 1.15fr;
  gap: clamp(24px, 3.5vw, 56px); padding: 88px 0 56px;
}
.f-logo { width: 224px; }
.f-brand > p { margin-top: 22px; line-height: 1.75; max-width: 320px; }
.f-rule { display: block; width: 36px; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 26px 0; }
.f-follow, .f-col h4 {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-300);
}
.f-col h4 { margin-bottom: 8px; }
.f-col h4::after { content: ""; display: block; width: 44px; height: 1px; background: var(--teal-600); margin-top: 12px; }
.socials { display: flex; gap: 14px; margin-top: 18px; }
.socials a {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; justify-content: center; color: #dfe7e5;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.socials a:hover { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f-col { display: flex; flex-direction: column; gap: 13px; }
.f-col a { color: #b7c2bf; transition: color 0.2s; width: fit-content; }
.f-col a:hover { color: var(--teal-300); }
.f-line { display: flex; gap: 14px; align-items: flex-start; line-height: 1.6; }
.f-ic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(79, 179, 177, 0.5);
  display: flex; align-items: center; justify-content: center; color: var(--teal-300);
  margin-top: 1px;
}
.f-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* newsletter */
.newsletter {
  position: relative; border-radius: 10px; overflow: hidden;
  background: var(--dark-850) url("assets/newsletter-bg.jpg") center / cover;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 44px 48px; margin-bottom: 72px; flex-wrap: wrap;
}
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 18, 17, 0.92), rgba(6, 18, 17, 0.78));
}
.newsletter > * { position: relative; }
.nl-left { display: flex; align-items: center; gap: 26px; }
.nl-badge {
  flex: none; width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid var(--gold-500); color: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
}
.nl-badge svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.nl-left h3 { font-family: var(--serif); font-weight: 500; font-size: 32px; color: #fff; }
.nl-left p { margin-top: 8px; max-width: 300px; line-height: 1.6; }
.nl-form { display: flex; flex: 1; min-width: 300px; max-width: 700px; background: #fff; border-radius: 999px; padding: 5px; box-shadow: 0 10px 30px rgba(3, 10, 9, 0.35); }
.nl-form input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--ink-900); font-family: var(--sans); font-weight: 300; font-size: 15.5px;
  padding: 12px 22px; min-width: 0;
}
.nl-form input::placeholder { color: #8a9694; }
.nl-form input:focus-visible { outline: 2px solid var(--teal-400); outline-offset: -2px; border-radius: 999px; }
.nl-thanks { color: var(--gold-400); font-size: 16px; }

.footer-bottom { border-top: 1px solid rgba(201, 162, 39, 0.45); }
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 0; flex-wrap: wrap;
}
.footer-bottom-inner p { font-size: 14.5px; }
.footer-bottom-inner img { width: 220px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ================= Responsive ================= */
@media (max-width: 1180px) {
  .nav-links > a, .nav-drop > a { padding: 10px 8px; font-size: 14px; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .work-grid { grid-template-columns: 1.16fr 1fr 1fr; }
  .footer-cols { grid-template-columns: 1.3fr 1fr 1fr; }
}

@media (max-width: 960px) {
  .utilbar-usps li:nth-child(n+2) { display: none; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 96px 28px 40px; box-shadow: -18px 0 48px rgba(10, 15, 14, 0.18);
    transform: translateX(100%); transition: transform 0.35s ease;
    overflow-y: auto; z-index: 55;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links > a, .nav-drop > a { padding: 15px 4px; font-size: 16px; border-bottom: 1px solid var(--line-light); }
  .nav-links > a.active { border-bottom-color: var(--line-light); }
  .nav-drop .drop-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 6px 14px; display: none; }
  .nav-drop.open .drop-menu { display: block; }
  .hamburger { display: flex; z-index: 70; }
  .btn-nav { display: none; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .work-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .footer-cols { grid-template-columns: 1fr 1fr; padding-top: 64px; }
  .hero-img { width: 100%; max-width: none; opacity: 0.3; background-position: 22% center; }
  .hero-img::before { background: linear-gradient(90deg, var(--dark-900) 0%, rgba(13, 20, 19, 0.55) 60%, rgba(13, 20, 19, 0.35) 100%); }
  .newsletter { padding: 36px 30px; }
}

@media (max-width: 620px) {
  .container { width: 100% - 40px; width: calc(100% - 40px); }
  .utilbar-inner { justify-content: center; }
  .utilbar-help .help-label, .utilbar-help a:last-child { display: none; }
  .utilbar-usps { gap: 10px; }
  .nav-inner { min-height: 72px; }
  .nav-logo img { width: 168px; }
  .hero-inner { padding: 60px 0 40px; }
  .hero-sub { font-size: 16px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-trust { flex-direction: column; gap: 18px; padding-bottom: 40px; }
  .trust-item { border-right: none; padding-right: 0; }
  .services, .why, .work, .brands { padding: 64px 0 72px; }
  .section-head { margin-bottom: 40px; }
  .svc-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; row-gap: 34px; }
  .why-col { padding-top: 18px; }
  .why-num { font-size: 46px; }
  .why-col h3 { margin: 14px 0 8px; }
  .why-col p { max-width: none; }
  .work-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .work-item.tall { grid-row: span 1; }
  .tab { padding: 8px 12px; font-size: 14px; }
  .brand-cell { flex: 0 0 50%; min-width: 0; }
  .brand-arrow { width: 44px; height: 44px; }
  .footer-cols { grid-template-columns: 1fr; gap: 36px; }
  .nl-left { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nl-form .btn { padding: 12px 20px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* =============================================================================
   PORT: shared page types (shop, category, product, clients, faq, content)
   Appended for the legacy site port. Same tokens as the approved homepage:
   Playfair headings, Outfit body, teal #0E7C7B family, gold hairlines,
   cream and pale blue bands. Nothing above this line was changed.
   ============================================================================= */

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--teal-600); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 8px;
  font-size: 14.5px; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--teal-400);
  outline-offset: 3px;
  border-radius: 3px;
}

.btn-line {
  border: 1px solid rgba(22, 32, 30, 0.22); color: var(--ink-900); background: #fff;
}
.btn-line:hover { border-color: var(--teal-600); color: var(--teal-600); }
.btn-block { display: flex; width: 100%; justify-content: center; }
.block-h {
  font-family: var(--serif); font-weight: 500; color: var(--ink-900);
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin-bottom: 16px;
}
.block-h::after {
  content: ""; display: block; width: 44px; height: 2px;
  background: var(--teal-400); margin-top: 16px;
}

/* ---------- Page hero (every generated page gets one) ---------- */
.phero {
  position: relative; background: var(--dark-900); color: #fff; overflow: hidden;
  isolation: isolate;
}
.phero-img {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transform: scale(1.02);
}
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, var(--dark-900) 0%, rgba(5, 7, 6, 0.94) 34%, rgba(5, 7, 6, 0.7) 62%, rgba(5, 7, 6, 0.5) 100%),
    linear-gradient(0deg, rgba(5, 7, 6, 0.9) 0%, rgba(5, 7, 6, 0.1) 55%);
}
.phero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, var(--teal-600), rgba(201, 162, 39, 0.6) 55%, transparent);
}
.phero-inner { position: relative; padding: 74px 0 78px; max-width: 780px; }
.phero--compact .phero-inner { padding: 58px 0 62px; }
.phero h1 {
  font-family: var(--serif); font-weight: 500; color: #fff;
  font-size: clamp(34px, 4.9vw, 60px); line-height: 1.08; margin-top: 18px;
  letter-spacing: 0.01em;
}
.phero .hero-rule { margin: 26px 0 22px; }
.phero-sub { font-size: 17px; color: #cbd5d2; line-height: 1.7; max-width: 620px; }
.phero-meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px;
}
.phero-meta li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: #dbe4e2; }
.phero-meta .ic { width: 16px; height: 16px; color: var(--teal-300); flex: none; }
.phero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* ---------- Breadcrumbs ---------- */
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 13px; letter-spacing: 0.04em;
}
.crumbs a { color: #9fb0ac; transition: color 0.2s; }
.crumbs a:hover { color: var(--teal-300); }
.crumbs li[aria-current] span { color: #e7edeb; }
.crumb-sep { color: rgba(255, 255, 255, 0.28); }

/* ---------- Product grid + card ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pcard {
  background: #fff; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-card); transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid rgba(22, 32, 30, 0.05);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.pcard.hidden { display: none; }
.pcard-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--light); }
.pcard-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s; }
.pcard:hover .pcard-photo img { transform: scale(1.055); }
.pcard-tag {
  position: absolute; left: 12px; top: 12px;
  background: rgba(5, 12, 16, 0.72); color: #e9f1ef; backdrop-filter: blur(6px);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
.pcard-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pcard-body h3 {
  font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink-900);
  line-height: 1.25; margin-bottom: 9px;
}
.pcard-body p { font-size: 14px; line-height: 1.6; color: var(--ink-600); }
.pcard-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px;
  color: var(--teal-600); font-size: 14px;
}
.pcard:hover .pcard-cta .arrow { transform: translateX(4px); }

/* ---------- Catalog tools: search, filters ---------- */
.catalog { background: var(--light); padding: 76px 0 92px; }
.catalog-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.searchbox {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--line-light); border-radius: 999px; padding: 4px 22px;
  min-width: min(420px, 100%); flex: 1; max-width: 460px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.searchbox:focus-within { border-color: var(--teal-400); box-shadow: 0 0 0 4px rgba(42, 168, 168, 0.12); }
.searchbox .ic { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.searchbox input {
  flex: 1; border: none; outline: none; background: none; min-width: 0;
  font-family: var(--sans); font-weight: 300; font-size: 15.5px; color: var(--ink-900);
  padding: 12px 0;
}
.searchbox input::placeholder { color: #97a3a0; }
.result-count { font-size: 14px; color: var(--ink-400); letter-spacing: 0.03em; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.fchip {
  font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink-600);
  background: #fff; border: 1px solid var(--line-light); border-radius: 999px;
  padding: 9px 18px; display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.fchip span { font-size: 12px; color: var(--ink-400); }
.fchip:hover { border-color: var(--teal-400); color: var(--teal-600); }
.fchip.is-active { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.fchip.is-active span { color: rgba(255, 255, 255, 0.75); }
.fchip--sub::before {
  content: ""; width: 5px; height: 5px; background: var(--gold-500);
  transform: rotate(45deg); flex: none;
}

.subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.subchip {
  font-size: 14px; color: var(--ink-900); background: #fff; border: 1px solid var(--line-light);
  border-radius: 999px; padding: 9px 18px; display: inline-flex; gap: 8px; align-items: center;
  transition: border-color 0.2s, color 0.2s;
}
.subchip span { font-size: 12px; color: var(--ink-400); }
.subchip:hover { border-color: var(--teal-500); color: var(--teal-600); }

.cat-intro {
  max-width: 760px; margin: 0 auto 40px; text-align: center;
  font-size: 16.5px; line-height: 1.75;
}
.empty-state {
  text-align: center; padding: 48px 20px; font-size: 16px; color: var(--ink-600);
  background: #fff; border: 1px dashed var(--line-light); border-radius: 10px;
}
.empty-state a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Product detail ---------- */
.pdp { background: var(--white); padding: 64px 0 72px; }
.pdp-grid {
  display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.gallery { display: flex; flex-direction: column; gap: 14px; }
.gal-main {
  border-radius: 10px; overflow: hidden; background: var(--light);
  box-shadow: var(--shadow-card); aspect-ratio: 4 / 3;
}
.gal-main img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.thumb {
  width: 92px; height: 74px; border-radius: 6px; overflow: hidden; padding: 0;
  border: 1px solid var(--line-light); background: var(--light);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { transform: translateY(-2px); border-color: var(--teal-400); }
.thumb.is-active { border-color: var(--teal-600); box-shadow: 0 0 0 2px rgba(14, 124, 123, 0.28); }

.quotecard {
  background: var(--cream); border: 1px solid rgba(201, 162, 39, 0.28); border-radius: 12px;
  padding: 34px 32px 30px; position: relative;
}
.quotecard::before {
  content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--teal-600), var(--gold-500));
}
.qc-kicker {
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--teal-600); font-weight: 500;
}
.qc-title, .aside-h {
  font-family: var(--serif); font-weight: 500; color: var(--ink-900);
  font-size: clamp(22px, 2.3vw, 28px); line-height: 1.2; margin: 12px 0 14px;
}
.qc-copy { font-size: 15px; line-height: 1.7; }
.qc-facts { list-style: none; margin: 22px 0; border-top: 1px solid rgba(22, 32, 30, 0.1); }
.qc-facts li {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid rgba(22, 32, 30, 0.1); font-size: 14.5px;
}
.qc-facts strong { font-weight: 500; color: var(--ink-900); }
.quotecard .btn { margin-top: 12px; }
.qc-trust { list-style: none; display: grid; gap: 10px; margin-top: 24px; }
.qc-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.qc-trust .ic { width: 17px; height: 17px; color: var(--teal-600); flex: none; }

.pdp-detail { background: var(--light); padding: 84px 0 90px; }
.pdp-detail-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(30px, 4vw, 64px); align-items: start;
}
.prose p { font-size: 16px; line-height: 1.8; margin-bottom: 18px; }
.prose h2 {
  font-family: var(--serif); font-weight: 500; color: var(--ink-900);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; margin: 38px 0 14px;
}
.prose h3 {
  font-family: var(--serif); font-weight: 500; color: var(--ink-900);
  font-size: 21px; margin: 30px 0 12px;
}
.prose > *:first-child { margin-top: 0; }
.prose-list, .note-list { list-style: none; display: grid; gap: 12px; margin: 22px 0 26px; }
.prose-list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.75; }
.prose-list li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; background: var(--gold-500); transform: rotate(45deg);
}
.notes { margin-top: 46px; }
.note-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.7; }
.note-list .ic { width: 18px; height: 18px; color: var(--teal-600); flex: none; margin-top: 4px; }

.specwrap {
  background: #fff; border: 1px solid var(--line-light); border-radius: 12px;
  padding: 30px 30px 34px; box-shadow: var(--shadow-card);
}
.spec-note { font-size: 14px; line-height: 1.65; color: var(--ink-400); margin-bottom: 18px; }
.spec-scroll { overflow-x: auto; }
table.spec { width: 100%; border-collapse: collapse; }
table.spec th, table.spec td { text-align: left; padding: 15px 0; vertical-align: top; border-bottom: 1px solid var(--line-light); }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: none; }
table.spec th {
  width: 34%; font-family: var(--sans); font-weight: 500; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-600);
  padding-right: 18px; white-space: nowrap;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13.5px; color: var(--ink-900); background: var(--light);
  border: 1px solid var(--line-light); border-radius: 999px; padding: 6px 13px;
}

/* ---------- Highlights ---------- */
.hlband {
  background: linear-gradient(180deg, var(--paper-top) 0%, var(--paper) 46%, var(--paper) 100%);
  padding: 84px 0 92px;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hl-card {
  background: #fff; border-radius: 10px; padding: 34px 30px 32px; text-align: center;
  box-shadow: var(--shadow-card);
}
.hl-card h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink-900); margin-bottom: 10px; }
.hl-card p { font-size: 15px; line-height: 1.65; }
.hl-div { margin: 0 0 16px; }

.related { background: var(--white); padding: 84px 0 92px; }

/* ---------- CTA band ---------- */
.ctaband {
  background: var(--dark-850); color: #fff; position: relative; overflow: hidden;
}
.ctaband::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 130% at 8% 0%, rgba(14, 124, 123, 0.4), transparent 62%);
}
.ctaband-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; padding: 68px 0 72px; flex-wrap: wrap;
}
.ctaband h2 {
  font-family: var(--serif); font-weight: 500; color: #fff;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; margin: 14px 0 14px; max-width: 620px;
}
.ctaband p { color: #b6c3c0; max-width: 560px; font-size: 16px; line-height: 1.7; }
.ctaband-actions { display: flex; flex-direction: column; gap: 14px; min-width: 240px; }
.ctaband-actions .btn { justify-content: center; }

/* ---------- Trust strip above footer ---------- */
.trustband { background: var(--cream); padding: 54px 0 58px; border-top: 1px solid rgba(201, 162, 39, 0.3); }
.trust-kicker {
  text-align: center; font-size: 12.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: #8a7430; margin-bottom: 26px;
}
.trustband .brand-cell img { max-height: 62px; }
.trust-more { text-align: center; margin-top: 26px; font-size: 14.5px; }
.trust-more a { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-700); }
.trust-more a:hover .arrow { transform: translateX(4px); }
.trust-more .arrow { transition: transform 0.25s; }

/* ---------- Client wall ---------- */
.clients-sec { background: var(--light); padding: 74px 0 92px; }
.cwall-lede { text-align: center; max-width: 820px; margin: 0 auto 34px; font-size: 16.5px; line-height: 1.8; }
.cwall-lede strong { color: var(--ink-900); font-weight: 500; }
.cwall {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.cwall-card {
  position: relative; background: #fff; border: 1px solid rgba(22, 32, 30, 0.07);
  border-radius: 10px; padding: 22px 16px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-height: 158px; justify-content: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.cwall-card.hidden { display: none; }
.cwall-card--btn { cursor: pointer; font-family: inherit; }
.cwall-card--btn:hover, .cwall-card--btn:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(14, 124, 123, 0.35);
}
.cwall-logo { display: flex; align-items: center; justify-content: center; height: 62px; width: 100%; }
.cwall-logo img {
  max-height: 62px; max-width: 100%; width: auto; object-fit: contain;
  mix-blend-mode: multiply; filter: grayscale(1); opacity: 0.78;
  transition: filter 0.3s, opacity 0.3s;
}
.cwall-card:hover .cwall-logo img, .cwall-card:focus-visible .cwall-logo img { filter: none; opacity: 1; }
.cwall-name {
  font-size: 13px; color: var(--ink-900); line-height: 1.4; letter-spacing: 0.02em;
}
.cwall-name--muted { color: var(--ink-400); }
.cwall-count { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-600); }
.cwall-view {
  position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(14, 124, 123, 0.1); color: var(--teal-600);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s;
}
.cwall-view .ic { width: 14px; height: 14px; }
.cwall-card--btn:hover .cwall-view, .cwall-card--btn:focus-visible .cwall-view { opacity: 1; }
.cwall-foot { margin-top: 34px; text-align: center; font-size: 13px; color: var(--ink-400); }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(4, 10, 9, 0.82); backdrop-filter: blur(3px); }
.lb-panel {
  position: relative; background: var(--white); border-radius: 12px;
  width: min(980px, 100%); max-height: 86vh; overflow: auto;
  box-shadow: 0 30px 90px rgba(3, 10, 9, 0.5);
}
.lb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; border-bottom: 1px solid var(--line-light);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.lb-head h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink-900); }
.lb-close { font-size: 30px; line-height: 1; color: var(--ink-400); padding: 4px 10px; border-radius: 6px; }
.lb-close:hover { color: var(--ink-900); background: var(--light); }
.lb-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 24px 26px 28px; }
.lb-body img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; background: var(--light); }

/* ---------- FAQ ---------- */
.faq-sec { background: var(--white); padding: 84px 0 96px; }
.faq-wrap { max-width: 900px; }
.faq-list { border-top: 1px solid var(--line-light); }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-q { margin: 0; }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left; padding: 24px 6px 24px 0;
  font-family: var(--serif); font-weight: 500; font-size: clamp(17px, 1.9vw, 21px);
  color: var(--ink-900); line-height: 1.4; transition: color 0.2s;
}
.faq-btn:hover { color: var(--teal-600); }
.faq-ic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-light); color: var(--teal-600);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s, background 0.25s, border-color 0.25s, color 0.25s;
}
.faq-btn[aria-expanded="true"] { color: var(--teal-600); }
.faq-btn[aria-expanded="true"] .faq-ic {
  transform: rotate(180deg); background: var(--teal-600); border-color: var(--teal-600); color: #fff;
}
.faq-a { padding: 0 60px 26px 0; }
.faq-a-inner { border-left: 2px solid var(--teal-400); padding-left: 22px; }
.faq-a-inner p { font-size: 16px; line-height: 1.8; margin-bottom: 12px; }
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-cta {
  margin-top: 48px; background: var(--paper); border: 1px solid var(--paper-line); border-radius: 12px;
  padding: 32px 34px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.faq-cta p { font-size: 16px; line-height: 1.7; max-width: 560px; }
.faq-cta strong { color: var(--ink-900); font-weight: 500; }

/* ---------- Generic content pages ---------- */
.pagebody { background: var(--white); padding: 80px 0 92px; }
.pagebody-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.pagebody-single { max-width: 860px; }
.prose--page p { font-size: 16.5px; }
.aside-card {
  background: var(--cream); border: 1px solid rgba(201, 162, 39, 0.28); border-radius: 12px;
  padding: 32px 30px; position: sticky; top: 104px;
}
.aside-card > p { font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
.aside-facts { list-style: none; display: grid; gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(22, 32, 30, 0.12); }
.aside-facts li { display: flex; gap: 12px; font-size: 14px; line-height: 1.6; }
.aside-facts .ic { width: 17px; height: 17px; color: var(--teal-600); flex: none; margin-top: 3px; }

/* ---------- Contact ---------- */
.contact-sec { background: var(--light); padding: 76px 0 92px; }
.ccards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 56px; }
.ccard {
  background: #fff; border-radius: 10px; padding: 30px 26px; box-shadow: var(--shadow-card);
  border: 1px solid rgba(22, 32, 30, 0.05);
}
.ccard-ic {
  width: 52px; height: 52px; border-radius: 50%; background: var(--teal-700); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.ccard-ic .ic { width: 22px; height: 22px; }
.ccard-label {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal-600); font-weight: 500; margin-bottom: 8px;
}
.ccard-value { font-size: 15.5px; line-height: 1.65; color: var(--ink-900); display: block; }
a.ccard-value:hover { color: var(--teal-600); }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.contact-form-wrap {
  background: #fff; border-radius: 12px; padding: 36px 34px 32px; box-shadow: var(--shadow-card);
}
.form-note { font-size: 14px; color: var(--ink-400); line-height: 1.65; margin-bottom: 24px; }
.qform { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; color: var(--ink-900); letter-spacing: 0.02em; }
.field input, .field textarea {
  font-family: var(--sans); font-weight: 300; font-size: 15px; color: var(--ink-900);
  background: var(--light); border: 1px solid var(--line-light); border-radius: 8px;
  padding: 12px 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus {
  border-color: var(--teal-400); box-shadow: 0 0 0 4px rgba(42, 168, 168, 0.12); background: #fff;
}
.field input[aria-invalid="true"] { border-color: #b4472f; }
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-msg { font-size: 14px; color: var(--teal-600); }
.form-msg[data-state="error"] { color: #b4472f; }
.contact-copy .note-list { margin-top: 20px; }

/* ================= Responsive: port pages ================= */
@media (max-width: 1180px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .cwall { grid-template-columns: repeat(4, 1fr); }
  .ccards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .phero-inner { padding: 58px 0 62px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pdp-grid, .pdp-detail-grid, .contact-grid, .pagebody-grid { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .hl-grid { grid-template-columns: repeat(2, 1fr); }
  .lb-body { grid-template-columns: repeat(2, 1fr); }
  .ctaband-inner { padding: 56px 0 60px; }
  .ctaband-actions { width: 100%; }
}

@media (max-width: 620px) {
  .phero-inner { padding: 46px 0 50px; }
  .phero .hero-rule { margin: 20px 0 18px; }
  .phero-sub { font-size: 15.5px; }
  .phero-meta { gap: 8px 18px; }
  .catalog, .clients-sec, .contact-sec, .pdp-detail, .hlband, .related, .faq-sec, .pagebody {
    padding: 52px 0 60px;
  }
  .pdp { padding: 40px 0 48px; }
  .pgrid { grid-template-columns: 1fr; }
  .cwall { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cwall-card { min-height: 138px; padding: 18px 12px 14px; }
  .ccards { grid-template-columns: 1fr; }
  .hl-grid { grid-template-columns: 1fr; }
  .qform { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 28px 22px 26px; }
  .quotecard { padding: 28px 22px 26px; }
  .specwrap { padding: 24px 20px 26px; }
  table.spec th { width: auto; display: block; padding-bottom: 8px; border-bottom: none; }
  table.spec td { display: block; padding-top: 0; }
  .faq-a { padding-right: 0; }
  .faq-btn { font-size: 17px; padding: 20px 0; gap: 14px; }
  .faq-cta { padding: 26px 22px; }
  .lb-body { grid-template-columns: 1fr; padding: 18px; }
  .lb-body img { height: 190px; }
  .catalog-tools { flex-direction: column; align-items: stretch; }
  .searchbox { max-width: none; }
  .thumb { width: 72px; height: 58px; }
  .trustband { padding: 40px 0 44px; }
  .ctaband-inner { padding: 44px 0 48px; }
}

/* Client wall: brand shown as a wordmark when no per client image exists yet */
.cwall-card--word {
  background: linear-gradient(160deg, #fff 0%, var(--cream) 100%);
  border-color: rgba(201, 162, 39, 0.32);
}
.cwall-word {
  font-family: var(--serif); font-weight: 500; font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.28; color: var(--ink-900); letter-spacing: 0.01em;
  position: relative; padding-top: 16px;
}
.cwall-word::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 7px; height: 7px; background: var(--gold-500);
}

/* Base size for inline icons so one never renders at its intrinsic size
   inside a button or link that has no icon rule of its own. */
svg.ic { width: 18px; height: 18px; flex: none; }
.btn svg.ic { width: 17px; height: 17px; }

/* Unnamed work gallery on the clients page */
.workwall { background: var(--white); padding: 84px 0 96px; }
.wgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.worktile {
  position: relative; padding: 0; border-radius: 8px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--light);
  border: 1px solid rgba(22, 32, 30, 0.06);
  transition: transform 0.28s, box-shadow 0.28s;
}
.worktile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s; }
.worktile:hover, .worktile:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.worktile:hover img, .worktile:focus-visible img { transform: scale(1.06); }
.worktile-view {
  position: absolute; right: 10px; bottom: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(5, 12, 16, 0.62); color: #fff; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
}
.worktile-view .ic { width: 15px; height: 15px; }
.worktile:hover .worktile-view, .worktile:focus-visible .worktile-view { opacity: 1; }
.workwall .section-head { max-width: 780px; }

@media (max-width: 1180px) { .wgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px) { .wgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .workwall { padding: 52px 0 60px; }
  .wgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Client logo wall, calibrated to the real assets: every legacy logo is a
   500x530 canvas with generous padding baked in, so the mark needs a much
   larger box to read. Shown in full colour, they are the trust asset. */
.cwall { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.cwall-card { min-height: 196px; padding: 24px 18px 18px; gap: 10px; }
.cwall-logo { height: 112px; }
.cwall-logo img {
  max-height: 112px; mix-blend-mode: normal; filter: none; opacity: 1;
  transition: transform 0.3s;
}
.cwall-card:hover .cwall-logo img, .cwall-card:focus-visible .cwall-logo img { transform: scale(1.04); }
.cwall-name { font-size: 13.5px; color: var(--ink-600); }
.cwall-card--word { min-height: 196px; }

@media (max-width: 1180px) { .cwall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .cwall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .cwall { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cwall-card, .cwall-card--word { min-height: 158px; padding: 18px 12px 14px; }
  .cwall-logo, .cwall-logo img { height: 86px; max-height: 86px; }
}

/* Trust strip: the legacy logos carry heavy built in padding, so they need a
   taller box than the homepage strip to read at a glance. */
.trustband .brand-cell { padding: 6px 14px; }
/* Same defect class Nick reported on the site logo: these client marks are
   dark artwork on a baked white canvas, so on the cream band each one sat in a
   visible white rectangle. Multiplying drops the white canvas into the cream
   and leaves only the mark. (The two white-on-black marks still show as dark
   tiles here; the homepage wall handles those with a dedicated dark cell, this
   shared strip would need the same flag adding in build/partials/chrome.js.) */
.trustband .brand-cell img { max-height: 86px; mix-blend-mode: multiply; }
@media (max-width: 620px) { .trustband .brand-cell img { max-height: 64px; } }