/*
 * G&T Images — approved-reference implementation.
 * Sections fill the document width. .frame is the shared content gutter only.
 * Desktop drawing space: 694 units. cqw sizes use the section's actual width;
 * no JavaScript viewport detection, page scaling, transform or zoom is used.
 * Below 1024px the illustration layout reflows into normal document flow.
 */
:root {
  color-scheme: only light;
  --orange: #ff7900;
  --orange-deep: #c65b0a;
  --brand-5b350f: #5b350f;
  --brand-66370610: #66370610;
  --brand-874706: #874706;
  --brand-d18327: #d18327;
  --brand-e7c5a0: #e7c5a0;
  --brand-e96a00: #e96a00;
  --brand-e9c8a5: #e9c8a5;
  --brand-ecd4ba: #ecd4ba;
  --brand-ed6900: #ed6900;
  --brand-efc39e: #efc39e;
  --brand-efcfb1: #efcfb1;
  --brand-f1c79c: #f1c79c;
  --brand-f1d9ca: #f1d9ca;
  --brand-f1dcc8: #f1dcc8;
  --brand-f6b578: #f6b578;
  --brand-f6e6d5: #f6e6d5;
  --brand-fc990f: #fc990f;
  --brand-ff4b16: #ff4b16;
  --brand-ff4d1c: #ff4d1c;
  --brand-ff521d: #ff521d;
  --brand-ff541d: #ff541d;
  --brand-ff5717: #ff5717;
  --brand-ff6916: #ff6916;
  --brand-ff6d1b: #ff6d1b;
  --brand-ff6f15: #ff6f15;
  --brand-ff7300: #ff7300;
  --brand-ff7415: #ff7415;
  --brand-ff781b: #ff781b;
  --brand-ff790012: #ff790012;
  --brand-ff790014: #ff790014;
  --brand-ff790018: #ff790018;
  --brand-ff79001a: #ff79001a;
  --brand-ff79001c: #ff79001c;
  --brand-ff790021: #ff790021;
  --brand-ff79002b: #ff79002b;
  --brand-ff79004d: #ff79004d;
  --brand-ff790080: #ff790080;
  --brand-ff7a20: #ff7a20;
  --brand-ff8509: #ff8509;
  --brand-ff8a19: #ff8a19;
  --brand-ff8a34: #ff8a34;
  --brand-ff8b48: #ff8b48;
  --brand-ff9b37: #ff9b37;
  --brand-ff9e53: #ff9e53;
  --brand-ffa451: #ffa451;
  --brand-ffad66: #ffad66;
  --brand-ffb26070: #ffb26070;
  --brand-ffb36e: #ffb36e;
  --brand-ffc68e: #ffc68e;
  --brand-ffdbb7: #ffdbb7;
  --brand-ffe0c2: #ffe0c2;
  --brand-fff0dd: #fff0dd;
  --brand-fff0df: #fff0df;
  --brand-fff0e7: #fff0e7;
  --brand-fff2e5: #fff2e5;
  --brand-fff3ea: #fff3ea;
  --brand-fff4e7: #fff4e7;
  --brand-fff4e8: #fff4e8;
  --brand-fff5e9: #fff5e9;
  --brand-fff5eb: #fff5eb;
  --brand-fff5ed: #fff5ed;
  --brand-fff6ed: #fff6ed;
  --brand-fff7ee: #fff7ee;
  --brand-fff8ef: #fff8ef;
  --brand-fff8f0: #fff8f0;
  --brand-fff8f1: #fff8f1;
  --brand-fff9f4: #fff9f4;
  --brand-fffaf5: #fffaf5;
  --ink: #101516;
  --muted: #46535e;
  --cream: var(--brand-fff0dd);
  --footer: #111819;
  --frame-max: 1680px;
  --section-gap: clamp(28px, 2.5vw, 42px);
  --orange-soft: var(--brand-fff5eb);
  --border: #e3e7eb;
  --border-warm: var(--brand-f1dcc8);
  --surface: #f7f9fa;
  --shadow-soft: 0 6px 24px rgb(24 35 43 / .06);
  --shadow-card: 0 12px 32px rgb(24 35 43 / .08);
  --heading-size: clamp(38px, 4.1vw, 64px);
  --body-size: clamp(16px, 1.2vw, 20px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--sticky-header-height, clamp(76px, 7vw, 112px)); }
body { position: relative; margin: 0; background: #fff; color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
em { color: var(--orange); font-style: normal; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand-fc990f); outline-offset: 5px; }
.frame { width: min(87.8481%, var(--frame-max)); 
  margin-inline: auto; position: relative; container-type: inline-size; }
.panel { position: relative; isolation: isolate; }
.decoration { position: absolute; pointer-events: none; user-select: none; z-index: -1; }
.eyebrow { color: var(--orange-deep); font-size: 1.297cqw; line-height: 1.3; font-weight: 700; text-transform: uppercase; margin-bottom: .8646cqw; }
h2 { font-size: 2.954cqw; line-height: 1.19; font-weight: 700; letter-spacing: -.035em; }
.body-copy { font-size: 1.369cqw; line-height: 1.45; color: var(--muted); }
.button-row { display: flex; align-items: center; gap: 1.585cqw; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.15cqw; min-height: 4.179cqw; padding: .95cqw 2.02cqw; border: 1px solid transparent; border-radius: 1.15cqw; font-size: 1.225cqw; font-weight: 700; line-height: 1.2; white-space: nowrap; position: relative; transition: background .18s ease, box-shadow .18s ease; }
.button img { width: 1.73cqw; height: 1.73cqw; object-fit: contain; }
.button-orange { color: #fff; background: linear-gradient(110deg, var(--brand-ff8509), var(--brand-ff7300)); box-shadow: inset 0 0 0 1px var(--brand-ffb26070); }
.button-orange:hover { background: var(--brand-ed6900); }
.button-orange img, .button-dark img, .button-dark-outline img { filter: brightness(0) invert(1); }
.button-outline { color: #101516; border-color: #91989a; background: #fff; }
.button-outline:hover { background: var(--brand-fff5e9); }
.button-dark { background: #080f12; color: #fff; border-color: #343d41; border-radius: 2.1cqw; }
.button-dark:hover { background: #263036; }
.button-dark-outline { color: #fff; border-color: #83898c; box-shadow: inset 0 0 0 2px #ffffff10; background: #080f12; }
.button-dark-outline:hover { background: #253035; }
.button-paw::after { content: ''; position: absolute; width: 2.7cqw; height: 2.7cqw; bottom: -1.3cqw; right: -1.25cqw; background: url('../assets/icons/ui/paw.png') center / contain no-repeat; transform: rotate(-22deg); pointer-events: none; }
.skip-link { position: fixed; left: 12px; top: -80px; padding: 12px 18px; z-index: 100; background: #fff; color: #111; }
#main, #main-content, .closing { position: relative; z-index: 1; }
#main > section, #main-content > section { position: relative; z-index: 1; }
/* Main section spacing is set on each section below, including its own mobile rule. */
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.paw-trail { position: absolute; width: 2cqw; height: 2cqw; pointer-events: none; z-index: 3; }
.paw-trail img { position: absolute; width: 1.87cqw; height: 1.87cqw; transform: rotate(24deg); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / .94); backdrop-filter: blur(12px); }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
.header-panel { min-height: clamp(76px, 7vw, 112px); display: flex; align-items: center; justify-content: space-between; padding-inline: 3.4cqw; gap: 3cqw; }
.brand { flex: 0 0 clamp(118px, 12cqw, 195px); }
.brand img { width: 100%; }
.primary-nav { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; gap: clamp(16px, 2.05cqw, 34px); font-size: clamp(12px, .94cqw, 16px); font-weight: 700; }
.primary-nav-list { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; gap: inherit; }
.primary-nav-list > li { flex: 0 0 auto; }
.primary-nav-list > li > a:not(.button) { display: block; white-space: nowrap; padding-block: 1cqw; }
.primary-nav-list > li > a:not(.button):hover { color: var(--orange-deep); }
.header-action { min-height: clamp(44px, 3.7cqw, 61px); padding-inline: clamp(17px, 1.75cqw, 29px); margin-left: .35cqw; border-radius: clamp(9px, .85cqw, 14px); font-size: clamp(12px, .91cqw, 15px); }
.header-action img { width: clamp(17px, 1.45cqw, 24px); height: clamp(17px, 1.45cqw, 24px); }
.menu-toggle { display: none; }
@media (min-width: 1024px) {
  .primary-nav-list { justify-content: center; }
  .primary-nav-list > li:first-child { margin-left: auto; }
  .primary-nav-list > li.header-cta { margin-left: auto; }
}

/* Hero */
.hero { min-height: calc(100svh - clamp(76px, 7vw, 112px)); scroll-margin-top: clamp(76px, 7vw, 112px); }
.hero .frame { min-height: inherit; }
.hero-panel { min-height: inherit; overflow: hidden; }
.hero-copy { width: 47%; margin-left: 0; padding: clamp(42px, 5.5cqw, 90px) 0 clamp(110px, 9cqw, 150px) 3.4cqw; position: relative; z-index: 3; }
.hero .eyebrow { margin-bottom: clamp(15px, 1.35cqw, 23px); font-size: clamp(12px, 1.05cqw, 18px); letter-spacing: -.02em; }
.hero h1 { max-width: 690px; margin-bottom: clamp(18px, 1.65cqw, 28px); font-size: clamp(45px, 4.25cqw, 72px); line-height: 1.08; letter-spacing: -.052em; font-weight: 700; }
.hero-intro { max-width: 600px; margin-bottom: clamp(25px, 2.1cqw, 36px); font-size: clamp(16px, 1.32cqw, 22px); line-height: 1.48; color: #334553; }
.hero .button-row { gap: clamp(12px, 1cqw, 17px); flex-wrap: nowrap; }
.hero .button { min-height: clamp(52px, 4cqw, 67px); padding-inline: clamp(20px, 1.9cqw, 32px); border-radius: clamp(10px, .9cqw, 15px); font-size: clamp(13px, 1.12cqw, 19px); }
.hero .button img { width: clamp(18px, 1.5cqw, 25px); height: clamp(18px, 1.5cqw, 25px); }
.hero-media { position: absolute; left: 46%; top: 20%; width: 53%; aspect-ratio: 1.96; z-index: 2; }
.hero-characters { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; }
.hero-books-wrap { position: absolute; right: -10px; bottom: -15px; width: clamp(175px, 26.5%, 240px); aspect-ratio: 1.086; overflow: hidden; z-index: 3; pointer-events: none; }
.hero-books-plant { display: block; width: 171.14%; max-width: none; height: auto; transform: translateX(-41.87%); }
.hero-trail { left: 41%; top: 1%; width: 59%; z-index: 1; }
.hero-facts { display: flex; align-items: center; gap: 0; margin-top: clamp(34px, 3cqw, 50px); font-size: clamp(11px, .88cqw, 15px); line-height: 1.25; font-weight: 700; text-transform: none; white-space: nowrap; }
.hero-facts li { display: flex; align-items: center; gap: clamp(7px, .65cqw, 11px); padding-inline: clamp(13px, 1.35cqw, 23px); }
.hero-facts li:first-child { padding-left: 0; }
.hero-facts li + li { border-left: 1px solid var(--brand-efc39e); }
.hero-facts li + li::before { display: none; }
.hero-facts img { width: clamp(30px, 2.45cqw, 41px); height: clamp(30px, 2.45cqw, 41px); object-fit: contain; filter: invert(47%) sepia(99%) saturate(1967%) hue-rotate(1deg) brightness(103%) contrast(106%); }
.scroll-cue { position: absolute; left: 50%; bottom: clamp(14px, 1.4cqw, 24px); top: auto; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: clamp(11px, .82cqw, 14px); font-weight: 500; gap: 9px; z-index: 4; }
.scroll-cue::before, .scroll-cue::after { content: ""; position: absolute; bottom: 20px; width: clamp(65px, 7cqw, 115px); height: 1px; background: var(--brand-ffb36e); }
.scroll-cue::before { right: calc(100% + 16px); }
.scroll-cue::after { left: calc(100% + 16px); }
.scroll-mark { width: clamp(36px, 3.05cqw, 51px); height: clamp(36px, 3.05cqw, 51px); border: 1px solid var(--brand-ffc68e); color: var(--orange); border-radius: 50%; font-size: clamp(31px, 2.7cqw, 45px); line-height: .83; text-align: center; }
.hero-paws { display: none; }

/* About */
.about-panel { min-height: 39.625cqw; }
.about-shape { width: 100%; top: 0; left: 0; }
.about-character { position: absolute; left: 15.418%; top: 5.9078cqw; width: 26.945%; }
.about-copy { margin-left: 51.441%; width: 44%; padding-top: 7.925cqw; padding-bottom: 4cqw; background: linear-gradient(180deg,rgba(255, 255, 255, 0) 8%,rgb(255, 255, 255) 16%);}
.about-copy .eyebrow { margin-bottom: .72cqw; }
.about-copy h2 { margin-bottom: 1.729cqw; }
.about-copy .body-copy { max-width: 37.8cqw; font-size: 1.369cqw; line-height: 1.45; }
.benefits { display: flex; align-items: center; gap: 1.08cqw; font-size: .8646cqw; font-weight: 700; margin-top: 2.02cqw; white-space: nowrap; }
.benefits li { display: flex; gap: .58cqw; align-items: center; }
.benefits li + li::before { content: '/'; color: #adb1b2; margin-right: .14cqw; }
.benefits img { width: 1.73cqw; height: 1.73cqw; object-fit: contain; filter: invert(57%) sepia(79%) saturate(950%) hue-rotate(342deg) brightness(109%) contrast(97%); }
.about-symbol { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid #d9dddd; background: #ffffffcf; border-radius: 50%; }
.about-symbol img { width: 3.8cqw; }
.about-award { width: 7.06cqw; height: 7.06cqw; left: 10.807%; top: 15.418cqw; }
.about-bulb { width: 6.05cqw; height: 6.05cqw; left: 39.482%; top: 6.48cqw; }
.about-paws { left: 44%; top: 36.023cqw; }
.about-paws img:nth-child(2) { left: 3.7cqw; top: 2.74cqw; }
.about-paws img:nth-child(3) { left: 2.7cqw; top: 5.9cqw; opacity: .18; }

/* Services: deliberately staggered positions follow the supplied route. */
.services-panel { min-height: 40.346cqw; }
.services-route { inset: 0; width: 100%; }
.services-heading { position: relative; padding-top: 0; margin-left: 6.628%; }
.services-heading .eyebrow { margin-bottom: .72cqw; }
.services-heading h2 { font-size: 3.17cqw; letter-spacing: -.03em; line-height: 1.09; }
.service-items { position: absolute; inset: 0; }
.service { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); width: 16%; text-align: center; font-size: 1.225cqw; line-height: 1.23; font-weight: 700; }
.service a { display: flex; align-items: center; flex-direction: column; gap: .576cqw; }
.icon-circle { display: flex; align-items: center; justify-content: center; border: 1px solid #aeb4b5; background: #ffffffec; width: 7.925cqw; height: 7.925cqw; border-radius: 50%; transition: border-color .18s ease, background .18s ease; }
.icon-circle img { width: 5.1cqw; height: 5.1cqw; object-fit: contain; }
.service a:hover .icon-circle { background: var(--brand-fff4e8); border-color: var(--orange); }
.service-01 { --x: 12.392%; --y: 13.256cqw; }
.service-02 { --x: 31.123%; --y: 11.815cqw; }
.service-03 { --x: 48.559%; --y: 9.51cqw; }
.service-04 { --x: 65.562%; --y: 7.205cqw; }
.service-05 { --x: 80.259%; --y: 8.501cqw; }
.service-06 { --x: 21.470%; --y: 27.09cqw; }
.service-07 { --x: 37.464%; --y: 24.928cqw; }
.service-08 { --x: 53.314%; --y: 23.775cqw; }
.service-09 { --x: 69.164%; --y: 22.046cqw; }
.service-10 { --x: 84.582%; --y: 24.063cqw; }

/* Process: the road is a separate SVG, with editable step content above it. */
.process-panel { min-height: 35.014cqw; }
.process-route { left: 0; top: -1.729cqw; width: 100%; }
.process-route-art { display: block; width: 100%; height: auto; }
/* Hands meet the arc near SVG (625, 26), following its 16-degree tangent. */
.process-goat {
  position: absolute; left: 81.56%; top: calc(-28.84% + 17px); width: 17%; height: auto;
  max-width: none; transform: rotate(16deg); transform-origin: 50% 95%;
}
.process-heading { padding-top: .8646cqw; margin-left: 3.891%; }
.process-heading .eyebrow { margin-bottom: .144cqw; }
.process-heading h2 { font-size: 2.882cqw; letter-spacing: -.04em; line-height: 1.24; }
.process-paws { left: 56%; top: -.8646cqw; }
.process-paws img:nth-child(2) { left: -3.7cqw; top: 2.594cqw; }
.process-steps { position: absolute; inset: 0; }
/* Each road node anchors the same icon, badge and text geometry. */
.step { --step-node-x: 5.475cqw; position: absolute; width: 24%; min-height: 9cqw; }
.step-icon { position: absolute; z-index: 2; width: 6.34cqw; height: 6.34cqw; left: calc(var(--step-node-x) - 5.1cqw); top: 3cqw; object-fit: contain; }
.step-number { position: absolute; z-index: 3; left: var(--step-node-x); top: .144cqw; width: 2.74cqw; height: 2.74cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--orange); color: #fff; font-size: 1.441cqw; box-shadow: 0 0 0 .432cqw #fff; }
.step-copy { margin-left: calc(var(--step-node-x) + 3.54cqw); padding-top: .144cqw; }
.step h3 { display: flex; align-items: center; min-height: 2.74cqw; font-size: 1.441cqw; line-height: 1.3; margin-bottom: 1cqw; }
.step p { font-size: 1.081cqw; line-height: 1.45; color: #343a3b; }
.step-discover { --step-node-x: 5.764cqw; left: 7.493%; top: 15.13cqw; }
.step-design { --step-node-x: 3.17cqw; left: 28.674%; top: 21.9cqw; }
.step-build { --step-node-x: 7.06cqw; left: 40.058%; top: 6.772cqw; }
.step-review { --step-node-x: 1.729cqw; left: 55.331%; top: 22.046cqw; }
.step-deliver { --step-node-x: 6.772cqw; left: 72.334%; top: 8.789cqw; }

/* Portfolio: the four images retain the reference's individual rotations. */
.work-panel { min-height: 32.997cqw; }
.work-shape { width: 100%; left: 0; top: -8.646cqw; }
.work-copy { margin-left: 6.484%; width: 24%; padding-top: 3.026cqw; position: relative; z-index: 4; }
.work-copy .eyebrow { margin-bottom: .72cqw; }
.work-copy h2 { margin-bottom: 1.0086cqw; }
.work-copy .body-copy { line-height: 1.34; margin-bottom: 1.87cqw; }
.work-copy .button { width: 16.283cqw; font-size: 1.225cqw; min-height: 3.89cqw; padding-inline: 1.73cqw; }
.work-collage { position: absolute; inset: 0; }
.project-card { position: absolute; display: block; transition: filter .18s ease; }
.project-card:hover { filter: brightness(1.07); }
.project-card img { width: 100%; }
.project-main { left: 31.123%; top: -.144cqw; width: 50.432%; z-index: 1; }
.project-video { left: 75.793%; top: 6.628cqw; width: 18.300%; z-index: 3; }
.project-mobile { left: 50.144%; top: 19.164cqw; width: 19.164%; z-index: 4; }
.project-cyber { left: 70.173%; top: 18.156cqw; width: 20.029%; z-index: 5; }

/* Client marks */
.clients-panel { min-height: 12.68cqw; padding-top: 2.305cqw; }
.clients h2 { font-size: .937cqw; line-height: 1.4; text-transform: uppercase; text-align: center; letter-spacing: -.01em; }
.client-logos { display: grid; grid-template-columns: 1.3fr .83fr 1fr 1fr 1fr 1fr 1.16fr; gap: 2.16cqw; align-items: center; margin: 1.152cqw 2.593cqw 0 6.916cqw; }
.client-logos img { width: 100%; height: 6.196cqw; object-fit: contain; }
.clients-paws { top: .4cqw; left: 4%; }
.clients-paws img:nth-child(2) { left: -1.8cqw; top: 3.2cqw; }
.clients-paws img:nth-child(3) { left: -2cqw; top: 7cqw; }
.clients-paws img:nth-child(4) { left: -.5cqw; top: 10.8cqw; }

/* Testimonials */
.testimonials-panel { min-height: 22.622cqw; }
.reviews-shape { width: 100%; inset: 0; }
.testimonials .eyebrow { text-align: center; padding-top: 1.009cqw; margin-bottom: .1cqw; }
.review-shell { display: grid; grid-template-columns: 5.187cqw 1fr 5.187cqw; gap: 2.02cqw; align-items: center; margin-inline: 4.0346%; }
.review-arrow { border: 1px solid #858e90; background: #ffffffaa; width: 4.755cqw; height: 4.755cqw; padding: 1.08cqw; border-radius: 50%; }
.review-arrow:hover { background: var(--brand-fff0dd); }
.review-arrow img { width: 100%; }
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.441cqw; }
.review { position: relative; min-height: 19.596cqw; padding: 3.31cqw 2.16cqw 2.31cqw 3.314cqw; background: center / 100% 100% no-repeat; font-size: 1.297cqw; line-height: 1.47; }
.review-first { background-image: url('../assets/decor/quote-left.svg'); }
.review-middle { background-image: url('../assets/decor/quote-middle.svg'); padding-top: 3.89cqw; }
.review-last { background-image: url('../assets/decor/quote-right.svg'); }
.review footer { margin-top: 1.0086cqw; font-weight: 700; font-size: 1.225cqw; white-space: nowrap; }
.review::before { content: '〟'; color: var(--brand-d18327); position: absolute; top: 2.45cqw; left: 2.38cqw; font-size: 2.3cqw; line-height: 1; transform: rotate(12deg); }

/* The closing area is one layered wave composition; its content is HTML. */
.closing { margin-top: max(-4.6835vw, -89.568px); margin-bottom: .85vw; }
.closing-panel { min-height: 50.72cqw; color: #fff; }
.footer-waves { width: 100%; height: 100%; inset: 0; object-fit: fill; }
.cta { position: relative; min-height: 30.98cqw; }
.cta-tiger { position: absolute; width: 28.386%; left: 0; top: 3.891cqw; z-index: 2; }
.cta-goat { position: absolute; width: 27.09%; left: 72.05%; top: .432cqw; z-index: 2; }
.cta-copy { width: 51%; margin-inline: auto; text-align: center; padding-top: 9.222cqw; position: relative; z-index: 3; }
.cta h2 { font-size: 2.954cqw; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 1.441cqw; }
.cta h2 em { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .8646cqw; }
.cta p { font-size: 1.297cqw; line-height: 1.45; margin-bottom: 2.02cqw; color: #eceded; }
.cta .button-row { justify-content: center; gap: 1.585cqw; flex-wrap: nowrap; }
.cta .button { font-size: 1.225cqw; padding-inline: 2.02cqw; min-height: 4.755cqw; border-radius: 1.153cqw; }
.cta .button-orange { min-width: 19.308cqw; }
.site-footer { position: relative; z-index: 4; }
.footer-grid { display: grid; grid-template-columns: 145fr 123fr 95fr 80fr 133fr; align-items: start; gap: 2.45cqw; padding-inline: 3.6cqw; padding-top: .29cqw; }
.footer-brand > a { display: block; }
.footer-logo { width: 14.12cqw; }
.socials { display: flex; gap: .86cqw; margin-top: 3.602cqw; }
.socials a { display: grid; place-items: center; width: 3.026cqw; height: 3.026cqw; border: 1px solid #849091; border-radius: 50%; }
.socials img { width: 61%; height: 61%; object-fit: contain; filter: brightness(0) invert(1); }
.socials a:hover { background: var(--brand-5b350f); }
.footer-column h3 { font-size: 1.153cqw; line-height: 1.3; font-weight: 700; margin: 1.01cqw 0 1.15cqw; }
.footer-column li { font-size: .937cqw; line-height: 1.54; color: #dee1e2; }
.footer-column a:hover, .footer-bottom a:hover { color: var(--brand-ff9b37); }
.footer-contact li { display: flex; align-items: center; gap: .8646cqw; margin-bottom: .937cqw; white-space: nowrap; }
.footer-contact img { width: 1.297cqw; height: 1.297cqw; object-fit: contain; filter: brightness(0) invert(1); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #414a4e; margin: 1.728cqw 3.6cqw 0; padding-top: .8646cqw; padding-bottom: .86cqw; font-size: 1.009cqw; color: #c3c8ca; }
.footer-bottom small { font-size: inherit; }
.footer-bottom nav { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; width: 27.38cqw; gap: 0; white-space: nowrap; }

/* Mobile is a real flow layout: readable text, tap targets and independent art. */
@media (max-width: 1023px) {
  :root { --section-gap: 24px; }
  .frame { width: calc(100% - 32px); }
  h2 { font-size: 30px; letter-spacing: -.035em; }
  .eyebrow { font-size: 11px; margin-bottom: 9px; }
  .body-copy { font-size: 15px; line-height: 1.6; }
  .button-row { gap: 12px; }
  .button { font-size: 12px; min-height: 44px; padding: 12px 17px; gap: 9px; border-radius: 8px; }
  .button img { width: 16px; height: 16px; }
  .button-paw::after { width: 24px; height: 24px; right: -11px; bottom: -12px; }
  .header-panel { min-height: 76px; padding: 8px 2px; }
  .brand { flex-basis: 118px; }
  .menu-toggle { display: block; width: 44px; height: 44px; border: 0; background: none; padding: 10px; }
  .menu-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; }
  .primary-nav { display: none; position: absolute; top: 72px; left: -16px; right: -16px; width: auto; max-height: calc(100svh - 72px); overflow-y: auto; background: #fff; padding: 16px 24px 24px; box-shadow: 0 15px 25px #00000014; font-size: 15px; gap: 0; flex-direction: column; align-items: stretch; }
  .primary-nav.open { display: flex; }
  .primary-nav-list { width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav-list > li.header-cta { margin-top: 10px; }
  .primary-nav-list > li > a:not(.button) { padding: 12px 0; }
  .primary-nav .header-action { margin: 0; width: max-content; font-size: 12px; min-height: 44px; }
  .header-action img { width: 17px; height: 17px; }
  .hero { min-height: calc(100svh - 76px); scroll-margin-top: 76px; }
  .hero-panel { min-height: inherit; padding: 30px 6px 45px; display: flex; flex-direction: column-reverse; overflow: hidden; }
  .hero-copy { width: 100%; padding: 0; margin: 0; }
  .hero .eyebrow { margin-bottom: 13px; font-size: 11px; }
  .hero h1 { max-width: 650px; font-size: clamp(38px, 10.5vw, 57px); line-height: 1.08; margin-bottom: 20px; }
  .hero-intro { max-width: 600px; font-size: 15px; line-height: 1.58; margin-bottom: 24px; }
  .hero .button-row { flex-wrap: wrap; gap: 11px; }
  .hero .button { min-height: 46px; padding: 12px 17px; font-size: 12px; border-radius: 9px; }
  .hero-facts { margin-top: 27px; flex-wrap: wrap; gap: 12px 0; font-size: 10px; }
  .hero-facts li { padding-inline: 11px; }
  .hero-facts li:first-child { padding-left: 0; }
  .hero-facts img { width: 25px; height: 25px; }
  .hero-media { position: relative; left: auto; top: auto; width: min(100%, 620px); max-width: none; align-self: center; margin-top: 30px; margin-bottom: 42px; aspect-ratio: 1.96; z-index: 2; }
  .hero-characters { position: absolute; top: 0; left: 0; width: 100%; }
  .hero-books-wrap { right: -10px; bottom: -15px; width: 100px; z-index: 3; }
  .hero-trail { left: 0; top: auto; bottom: 0; width: 100%; }
  .scroll-cue, .paw-trail { display: none; }
  .about-panel { min-height: 0; padding: 25px 20px 35px; border-radius: 45% 35% 12% 15% / 12% 12% 5% 5%; }
  .about-shape { display: none; }
  .about-character { position: relative; left: auto; top: auto; width: 220px; max-width: 70%; margin: 0 auto 25px; }
  .about-symbol { width: 45px; height: 45px; }
  .about-symbol img { width: 58%; }
  .about-award { left: 6%; top: 130px; }
  .about-bulb { left: auto; right: 9%; top: 47px; }
  .about-copy { width: 100%; margin: 0; padding: 0; }
  .about-copy h2 { margin-bottom: 17px; }
  .about-copy .eyebrow { margin-bottom: 9px; }
  .about-copy .body-copy { max-width: none; font-size: 14px; line-height: 1.65; }
  .benefits { margin-top: 20px; gap: 12px; flex-wrap: wrap; font-size: 10px; }
  .benefits li { gap: 5px; }
  .benefits img { width: 18px; height: 18px; }
  .benefits li + li::before { display: none; }
  .services-panel { min-height: 0; padding: 50px 4px 35px; }
  .services-heading { margin: 0; padding: 0; }
  .services-heading .eyebrow { margin-bottom: 9px; }
  .services-heading h2, .process-heading h2 { font-size: 30px; line-height: 1.19; }
  .services-route { display: none; }
  .service-items { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 15px; margin-top: 28px; }
  .service { position: static; transform: none; width: auto; font-size: 12px; line-height: 1.35; }
  .service a { gap: 10px; padding: 4px; }
  .icon-circle { width: 76px; height: 76px; }
  .icon-circle img { width: 44px; height: 44px; }
  .process-panel { min-height: 0; padding: 30px 4px 35px; }
  .process-heading { margin: 0; padding: 0; }
  .process-heading .eyebrow { margin-bottom: 9px; }
  .process-route { display: none; }
  .process-steps { position: relative; inset: auto; display: grid; gap: 25px; margin: 30px 0 0 8px; padding-left: 12px; border-left: 4px solid #e7e9ea; }
  .step { position: relative; left: auto; top: auto; width: auto; min-height: 88px; padding-left: 14px; }
  .step-icon, .step-deliver .step-icon { width: 52px; height: 52px; top: 19px; left: 10px; }
  .step-number { left: -28px; top: 0; width: 25px; height: 25px; font-size: 14px; box-shadow: 0 0 0 4px #fff; }
  .step .step-number { left: -28px; }
  .step .step-copy { margin-left: 64px; padding-top: 0; }
  .step h3 { font-size: 18px; margin-bottom: 8px; }
  .step p { font-size: 14px; line-height: 1.5; }
  .work-panel { min-height: 0; padding: 32px 17px 15px; background: #f7f8f8; border-radius: 40px; }
  .work-shape { display: none; }
  .work-copy { width: 100%; margin: 0; padding: 0; }
  .work-copy .eyebrow { margin-bottom: 9px; }
  .work-copy h2 { margin-bottom: 14px; }
  .work-copy .body-copy { font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
  .work-copy .body-copy br { display: none; }
  .work-copy .button { width: auto; min-height: 44px; font-size: 12px; padding: 12px 18px; }
  .work-collage { position: relative; margin: 28px -12px 0; aspect-ratio: 440 / 228; }
  .project-main { left: 0; top: 0; width: 79.55%; }
  .project-video { left: 70.45%; top: 20.61%; width: 28.86%; }
  .project-mobile { left: 30%; top: 58.8%; width: 30.23%; }
  .project-cyber { left: 61.59%; top: 55.7%; width: 31.59%; }
  .clients-panel { min-height: 0; padding: 38px 3px 25px; }
  .clients h2 { font-size: 10px; line-height: 1.5; }
  .client-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 18px; margin: 20px 0 0; }
  .client-logos img { height: 45px; }
  .client-logos img:last-child { grid-column: 2; }
  .testimonials-panel { min-height: 0; padding: 20px 0 30px; }
  .testimonials .eyebrow { padding: 0; margin-bottom: 8px; font-size: 11px; }
  .reviews-shape { height: 100%; object-fit: fill; }
  .review-shell { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 3px; margin: 0; }
  .review-arrow { width: 31px; height: 31px; padding: 8px; }
  .reviews { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; }
  .reviews::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 100%; scroll-snap-align: center; font-size: 14px; line-height: 1.5; min-height: 245px; padding: 45px 27px 30px; }
  .review footer { font-size: 12px; margin-top: 13px; white-space: normal; }
  .review::before { font-size: 25px; left: 19px; top: 33px; }
  .closing { margin-top: -5px; margin-bottom: 16px; }
  .closing-panel { min-height: 0; background: linear-gradient(to bottom, transparent 70px, var(--footer) 70px); }
  .footer-waves { height: 280px; object-fit: fill; top: -8px; }
  .cta { min-height: 0; padding: 150px 16px 38px; }
  .cta-tiger { width: min(35%, 170px); top: 23px; left: 0; }
  .cta-goat { width: min(34%, 175px); top: -5px; right: 0; left: auto; }
  .cta-copy { width: 100%; padding-top: 0; }
  .cta h2 { font-size: 25px; line-height: 1.25; margin-bottom: 18px; }
  .cta h2 em { text-underline-offset: 5px; }
  .cta p { font-size: 12px; line-height: 1.6; margin-bottom: 23px; }
  .cta .button-row { gap: 12px; flex-wrap: wrap; }
  .cta .button { font-size: 11px; min-height: 44px; border-radius: 8px; padding-inline: 14px; }
  .cta .button-orange { min-width: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 18px; padding: 24px; border-top: 1px solid var(--brand-874706); }
  .footer-brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
  .footer-logo { width: 120px; }
  .socials { margin: 0; gap: 6px; }
  .socials a { width: 27px; height: 27px; }
  .footer-column h3 { font-size: 13px; margin: 0 0 13px; }
  .footer-column li { font-size: 11px; line-height: 1.75; }
  .footer-column a { display: inline-block; padding-block: 2px; }
  .footer-contact { grid-column: auto; }
  .footer-contact li { white-space: normal; gap: 9px; margin-bottom: 6px; }
  .footer-contact img { width: 15px; height: 15px; }
  .footer-bottom { display: block; margin: 0 24px; padding: 15px 0 20px; font-size: 10px; line-height: 1.5; }
  .footer-bottom nav { width: auto; justify-content: flex-start; margin-top: 13px; gap: 12px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}



/* About section 02: temporary media is intentionally replaceable. */
.about { margin-block-start: 32px; scroll-margin-top: clamp(76px, 7vw, 112px); display: flex; align-items: center; }
.about .frame { width: min(92%, var(--frame-max)); }
.about-panel { width: 100%; min-height: 0; overflow: hidden; }
.about-shape { display: none; }
.about-character { left: 0; top: 17%; width: min(60%, 760px); max-width: none; z-index: 2; }
video.about-character { height: auto; }
.about-symbol { width: clamp(54px, 7cqw, 112px); height: clamp(54px, 7cqw, 112px); border-color: var(--brand-efcfb1); border-radius: 20%; background: #ffffffd9; box-shadow: 0 5px 20px #1f28280d; transform: rotate(-7deg); z-index: 3; }
.about-symbol img { width: 57%; }
.about-award { left: 6%; top: 22%; }
.about-bulb { left: 19%; top: 4%; transform: rotate(8deg); }
.about-handshake { left: 34%; top: 20%; transform: rotate(9deg); }
.about-copy { position: relative; z-index: 4; margin-left: 54%; width: 42%; padding-top: clamp(78px, 8.4cqw, 142px); padding-bottom: clamp(42px, 4vw, 64px); }
.about-copy .eyebrow { margin-bottom: clamp(10px, .95cqw, 16px); font-size: clamp(13px, 1.15cqw, 19px); }
.about-copy h2 { margin-bottom: clamp(22px, 2cqw, 34px); font-size: clamp(42px, 4.42cqw, 74px); line-height: 1.04; letter-spacing: -.05em; }
.about-copy .body-copy { max-width: 100%; font-size: clamp(16px, 1.45cqw, 24px); line-height: 1.4; color: #334553; }
.about-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(31px, 3cqw, 52px); }
.about-points li { display: grid; grid-template-columns: clamp(34px, 3.6cqw, 61px) 1fr; align-items: start; gap: clamp(9px, .9cqw, 15px); min-height: clamp(72px, 6.9cqw, 118px); padding-inline: clamp(11px, 1.3cqw, 22px); }
.about-points li:first-child { padding-left: 0; }
.about-points li + li { border-left: 1px solid var(--brand-f1c79c); }
.about-points img { width: 100%; height: auto; object-fit: contain; filter: invert(48%) sepia(93%) saturate(1717%) hue-rotate(2deg) brightness(104%) contrast(106%); }
.about-points strong { display: block; margin-top: 1px; font-size: clamp(15px, 1.47cqw, 25px); line-height: 1.05; }
.about-points span { display: block; margin-top: clamp(6px, .52cqw, 9px); font-size: clamp(12px, 1.1cqw, 18px); line-height: 1.26; color: #273849; }
.about-statement { position: relative; margin-top: clamp(30px, 2.8cqw, 47px); padding-top: clamp(20px, 1.8cqw, 30px); font-size: clamp(22px, 2.3cqw, 39px); letter-spacing: -.045em; line-height: 1.1; }
.about-statement::before { content: ""; position: absolute; top: 0; left: 0; width: clamp(82px, 8.6cqw, 145px); height: 2px; background: var(--orange); }
.about-statement strong { font-weight: 700; }
.about-paws { display: none; }

@media (max-width: 1023px) {
  .about { display: block; margin-block-start: 24px; }
  .about .frame { width: calc(100% - 32px); }
  .about-panel { min-height: 0; padding: 0 6px 40px; background: transparent; border-radius: 0; overflow: hidden; }
  .about-shape { display: none; }
  .about-character { position: relative; left: auto; top: auto; width: 110%; max-width: none; margin: 52px -5% 26px; z-index: 2; }
  .about-symbol { width: 54px; height: 54px; }
  .about-award { left: 4%; top: 79px; }
  .about-bulb { left: auto; right: 4%; top: 65px; }
  .about-handshake { left: auto; right: 10%; top: 235px; }
  .about-copy { width: 100%; margin: 0; padding: 0; }
  .about-copy .eyebrow { font-size: 11px; margin-bottom: 11px; }
  .about-copy h2 { font-size: clamp(36px, 10.1vw, 50px); margin-bottom: 18px; }
  .about-copy .body-copy { font-size: 15px; line-height: 1.58; }
  .about-points { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .about-points li { grid-template-columns: 39px 1fr; min-height: 0; padding: 0 0 14px; }
  .about-points li + li { border-left: 0; border-top: 1px solid var(--brand-f1c79c); padding-top: 14px; }
  .about-points strong { font-size: 17px; }
  .about-points span { font-size: 13px; }
  .about-statement { margin-top: 24px; padding-top: 17px; font-size: 25px; }
}


/* The media wrapper keeps the floating cards attached to the goat at every breakpoint. */
.about-media { display: contents; }
@media (max-width: 1023px) {
  .about-panel { display: flex; flex-direction: column; }
  .about-media { display: block; position: relative; width: 100%; aspect-ratio: 1.68; margin: 20px 0 26px; z-index: 2; }
  .about-media .about-character { position: absolute; left: -5%; top: auto; bottom: 0; width: 110%; max-width: none; margin: 0; }
  .about-media .about-symbol { position: absolute; width: clamp(46px, 13vw, 72px); height: clamp(46px, 13vw, 72px); }
  .about-media .about-award { left: 6%; top: 34%; }
  .about-media .about-bulb { left: 36%; right: auto; top: -18%; }
  .about-media .about-handshake { left: 81%; right: auto; top: 24%; }
}

@media (max-width: 600px) {
  .about-media .about-bulb { top: -31%; }
}

@media (min-width: 1080px) and (max-width: 1400px) {
  .about-handshake { left: 39%; }
  .about-character { width: 52%; }
}


/* About media backdrop: independent from the illustration and its floating cards. */
.about-media::before { content: ""; position: absolute; background: linear-gradient(108deg, #f7f5f5, #fff); 
  pointer-events: none; z-index: -1; }
@media (min-width: 1024px) {
  .about-media { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .about-media::before { left: -1%; top: 2.5%; width: 65%; height: 90%; border-radius: 100% ; 
    border-top: 4px solid rgba(0, 0, 0, 0.626);
    transform: rotate(-15deg);

  }
}
@media (max-width: 1023px) {
  .about-media::before { left: -5%; top: 8%; width: 110%; height: 82%; border-radius: 42% 46% 40% 38% / 20% 22% 28% 26%; }
}

/* Solutions: videographer intro followed by the eight learning offers. */
.services { margin-block-start: 16px; scroll-margin-top: clamp(76px, 7vw, 112px); }
.services .frame { width: min(92%, var(--frame-max)); }
.services-panel { min-height: 0; padding: 0; }
.solutions-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 35%) minmax(0, 1fr);
  align-items: center;
  gap: 3%;
  min-height: 0;
  padding: 24px 1% clamp(52px, 5vw, 86px);
}
.solutions-intro-copy { position: relative; z-index: 2; align-self: start; }
.solutions-intro-copy .eyebrow { font-size: clamp(13px, 1vw, 18px); margin-bottom: 16px; }
.solutions-intro-copy h2 { font-size: clamp(40px, 4.4vw, 75px); line-height: 1.06; max-width: 610px; }
.solutions-intro-copy .body-copy { margin-top: 24px; max-width: 440px; font-size: clamp(16px, 1.2vw, 21px); }
.solutions-intro-media { position: relative; width: 100%; align-self: center; transform: translateY(clamp(90px, 9.5vw, 160px)); }
.solutions-intro-media::after { content: ""; position: absolute; inset: 4% 2% 9% 0; 
  border-radius: 45% 55% 40% 60% / 42% 30% 65% 55%; background: 
  linear-gradient(130deg, #f8f9fa 20%, var(--brand-fff0df) 75%, #fff 95%); z-index: -1; border-top: 3px solid #2a2a2aae; border-right: 3px solid #28272783;}
.solutions-intro-media::before { content: ""; position: absolute; inset: auto 0 -10px; height: 15%; 
  background: #fff; pointer-events: none; z-index: 2; }
.solutions-intro-media video { position: relative; z-index: 1; display: block; width: 100%; max-height: min(68vw, 660px); height: auto; object-fit: contain; }
.solutions-offers { scroll-margin-top: clamp(76px, 7vw, 112px); position: relative; z-index: 3; margin-top: 0; isolation: isolate; padding: clamp(50px, 5.5vw, 94px) 1% 54px; overflow: hidden; }
.solutions-offers::before { content: ""; position: absolute; inset: 22% -2% 6%; background: radial-gradient(ellipse at 20% 35%, var(--brand-fff4e8) 0, transparent 48%), radial-gradient(ellipse at 73% 58%, #f5f7f8 0, transparent 55%), radial-gradient(ellipse at 88% 85%, var(--brand-fff8f0) 0, transparent 42%); opacity: .9; z-index: -2; pointer-events: none; }
.solutions-route { position: absolute; left: -2%; top: 12%; width: 104%; height: 72%; z-index: -1; overflow: visible; pointer-events: none; }
.solutions-route path { fill: none; stroke: var(--brand-ff7a20); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.solution-items { --solution-icon-size: clamp(120px, 11.5vw, 190px); --solution-grid-gap: 2cqw; --solution-line-gap: 12px; container-type: inline-size; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2%; row-gap: clamp(34px, 4.3vw, 70px); align-items: start; }
.solution-item { position: relative; min-width: 0; text-align: center; }
.solution-item::after { content: ""; position: absolute; top: calc(var(--solution-icon-size) / 2); left: calc(50% + var(--solution-icon-size) / 2 + var(--solution-line-gap)); width: max(0px, calc(100% + var(--solution-grid-gap) - var(--solution-icon-size) - var(--solution-line-gap) * 2)); height: 1px; background: var(--brand-ff790080); pointer-events: none; }
.solution-item:nth-child(4n)::after, .solution-item:last-child::after { display: none; }
.solution-item a { display: flex; flex-direction: column; align-items: center; color: inherit; }
.solution-icon { display: grid; place-items: center; width: var(--solution-icon-size); aspect-ratio: 1; margin-bottom: 9px; border: 1px solid var(--brand-f6e6d5); border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgba(24, 30, 33, .08); }
.solution-icon svg { width: 69%; height: 69%; fill: none; stroke: #121718; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.solution-icon .accent-fill { fill: var(--brand-ff7415); stroke: #121718; }
.solution-icon .accent-stroke { stroke: var(--brand-ff7415); stroke-width: 6; }
.solution-icon .check { stroke: #fff; stroke-width: 6; }
.solution-item strong { font-size: clamp(17px, 1.38vw, 23px); line-height: 1.16; letter-spacing: -.035em; }
.solution-item a > span:last-child { max-width: 300px; margin-top: 4px; color: #334553; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.3; }
.solution-item a[href]:hover .solution-icon { border-color: var(--brand-ff9e53); box-shadow: 0 8px 24px var(--brand-ff79001c); }
.solutions-next { display: flex; flex-direction: column; align-items: center; gap: 9px; width: max-content; margin: 22px auto 0; font-size: 14px; color: #273849; }
.solutions-next .scroll-mark { display: block; }
@media (max-width: 1023px) {
  .services { margin-block-start: 8px; scroll-margin-top: 76px; }
  .services .frame { width: calc(100% - 32px); }
  .solutions-intro { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 24px 0 56px; }
  .solutions-intro-copy h2 { font-size: clamp(36px, 8vw, 61px); }
  .solutions-intro-copy .body-copy { font-size: 16px; margin-top: 16px; }
  .solutions-intro-media { max-width: 760px; margin: 0 auto; transform: none; }
  .solutions-intro-media video { max-height: 56svh; }
  .solutions-offers { scroll-margin-top: 76px; margin-top: -70px; min-height: 0; padding: 48px 0 55px; }
  .solution-items { --solution-icon-size: clamp(100px, 22vw, 170px); --solution-grid-gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
  .solution-item:nth-child(2n)::after { display: none; }
  .solution-item strong { font-size: clamp(16px, 2.5vw, 21px); }
  .solution-item a > span:last-child { font-size: clamp(13px, 2vw, 17px); }
  .solutions-route { display: none; }
}
@media (max-width: 540px) {
  .solutions-intro { align-content: center; }
  .solutions-intro-copy h2 { font-size: clamp(34px, 10vw, 48px); }
  .solution-items { --solution-icon-size: min(35vw, 132px); --solution-grid-gap: 12px; --solution-line-gap: 8px; gap: 29px 12px; }
  .solution-item strong { font-size: 15px; }
  .solution-item a > span:last-child { font-size: 12px; line-height: 1.35; }
}

/* Our Work: scope and featured portfolio. */
.work { margin-block-start: 24px; scroll-margin-top: clamp(76px, 7vw, 112px); }
.work .frame { width: min(92%, var(--frame-max)); }
.work-panel { min-height: 0; padding: 24px 1% 26px; background: transparent; border-radius: 0; }
.work-panel::before { content: ""; position: absolute; inset: 2% -2% 6%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 48% 32% at 75% 20%, var(--brand-fff5e9) 0, transparent 100%), radial-gradient(ellipse 58% 34% at 55% 58%, #f5f7f8 0, transparent 100%), radial-gradient(ellipse 45% 30% at 12% 82%, var(--brand-fff8f1) 0, transparent 100%); }
.work-route { position: absolute; left: -5%; top: -80px; width: 110%; height: calc(100% + 115px); z-index: 0; overflow: visible; pointer-events: none; }
.work-route path { fill: none; stroke: var(--brand-ff6916); stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.work-paw { position: absolute; z-index: 2; width: clamp(25px, 2.2vw, 36px); pointer-events: none; }
.work-paw-first { left: 24%; top: -6%; transform: rotate(-14deg); }
.work-paw-second { left: 85%; bottom: -2%; transform: rotate(12deg); }
.work-top { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 48%) minmax(0, 48%); grid-template-rows: auto 1fr; align-items: start; gap: 26px 4%; min-height: 0; background: transparent; }
.work-visual { grid-column: 1; grid-row: 1 / 3; position: relative; isolation: isolate; align-self: center; width: 100%; }
.work-visual::before { content: ""; position: absolute; z-index: -1; inset: -5% 3% -2% -2%; background: radial-gradient(ellipse at 36% 45%, var(--brand-fff0df), var(--brand-fff8ef) 58%, #fff 100%); border-radius: 42% 56% 28% 36% / 40% 57% 27% 31%; pointer-events: none; }
.work-goat { display: block; width: 108%; max-width: none; height: auto; margin-left: -4%; }
.work-goat-rays { position: absolute; width: 9%; height: auto; top: 24%; left: 14%; fill: none; stroke: var(--orange); stroke-width: 9; stroke-linecap: round; pointer-events: none; }
.work-intro { grid-column: 2; grid-row: 1; min-width: 0; max-width: none; }
.work-intro .eyebrow, .work-featured .eyebrow { font-size: clamp(14px, 1.05vw, 18px); margin-bottom: 10px; }
.work-intro h2 { font-size: clamp(38px, 4.35vw, 76px); line-height: 1.03; letter-spacing: -.045em; white-space: normal; }
.work-intro .body-copy { max-width: none; margin-top: 22px; font-size: clamp(18px, 1.45vw, 26px); line-height: 1.35; color: #354759; }
.work-scope-list { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr; align-self: start; gap: 12px; margin: 0; padding-left: clamp(16px, 4vw, 66px); }
.work-scope-item { display: flex; align-items: center; justify-content: flex-start; gap: 20px; min-height: clamp(82px, 6.8vw, 114px); padding: 0; background: none; border-radius: 0; color: #304253; font-size: clamp(16px, 1.5vw, 25px); line-height: 1.25; }
.work-scope-icon { display: grid; place-items: center; flex: 0 0 clamp(86px, 9vw, 150px); width: clamp(86px, 9vw, 150px); aspect-ratio: 1.4; background: var(--brand-fff7ee); border-radius: 51% 46% 49% 43% / 42% 53% 45% 55%; }
.work-scope-item:nth-child(even) .work-scope-icon { background: #f6f8fa; border-radius: 43% 53% 45% 55% / 55% 46% 52% 42%; }
.work-scope-item svg { width: 52%; height: 68%; fill: none; stroke: #111719; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.work-scope-item .work-icon-accent { stroke: var(--brand-ff6f15); }
.work-scope-item .work-icon-white { fill: #fff; }
.work-featured { position: relative; z-index: 1; margin-top: clamp(28px, 3vw, 48px); }
.work-featured h3 { font-size: clamp(42px, 3.7vw, 65px); line-height: 1.04; letter-spacing: -.045em; }
.work-featured > p:last-child { margin-top: 4px; color: #354759; font-size: clamp(18px, 1.4vw, 24px); }
.work-project-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 22px); margin-top: 20px; }
.work-project { min-width: 0; }
.work-project h4 { margin: 9px 0 0; font-size: clamp(17px, 1.3vw, 23px); line-height: 1.2; letter-spacing: -.025em; }
.work-project > p { margin-top: 2px; color: #354759; font-size: clamp(15px, 1.1vw, 19px); line-height: 1.25; }
.work-next { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; width: max-content; margin: 20px auto 0; color: #304253; font-size: 15px; }
.work-next .scroll-mark { display: block; }
@media (max-width: 1250px) {
  .work-intro h2 { font-size: clamp(38px, 4vw, 58px); }
  .work-intro .body-copy { font-size: clamp(17px, 1.5vw, 21px); }
  .work-scope-item { gap: 15px; font-size: clamp(16px, 1.5vw, 20px); }
  .work-scope-list { padding-left: 12px; }
  .work-scope-icon { flex-basis: 100px; width: 100px; }
}
@media (max-width: 1023px) {
  .work { margin-block-start: 8px; scroll-margin-top: 76px; }
  .work .frame { width: calc(100% - 32px); }
  .work-panel { min-height: 0; padding: 16px 0 32px; background: transparent; border-radius: 0; }
  .work-top { grid-template-columns: minmax(0, 44%) minmax(0, 52%); gap: 24px 4%; min-height: 0; }
  .work-goat { width: 104%; margin-left: -2%; }
  .work-scope-icon { flex-basis: 78px; width: 78px; }
  .work-intro h2 { font-size: clamp(32px, 4.4vw, 45px); white-space: normal; }
  .work-intro .body-copy { max-width: 650px; font-size: clamp(17px, 2.2vw, 21px); }
  .work-scope-list { width: 100%; margin: 0; padding-left: 0; gap: 10px; }
  .work-scope-item { font-size: 16px; min-height: 72px; gap: 12px; }
  .work-featured { margin-top: 42px; }
  .work-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .work-route { top: -52px; height: calc(100% + 78px); }
  .work-paw-first { top: -5%; }
}
@media (max-width: 600px) {
  .work-panel { padding-top: 16px; }
  .work-intro h2 { font-size: clamp(38px, 10vw, 54px); }
  .work-intro .body-copy { font-size: 16px; }
  .work-top { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 24px; }
  .work-intro { grid-column: 1; grid-row: 1; }
  .work-visual { grid-column: 1; grid-row: 2; width: min(100%, 480px); margin: 12px auto; }
  .work-scope-list { grid-column: 1; grid-row: 3; gap: 8px; }
  .work-scope-item { min-height: 80px; padding: 0; gap: 16px; font-size: 17px; }
  .work-scope-icon { flex-basis: 96px; width: 96px; }
  .work-scope-item br { display: none; }
  .work-featured { margin-top: 35px; }
  .work-featured h3 { font-size: clamp(38px, 10vw, 50px); }
  .work-project-grid { grid-template-columns: 1fr; gap: 23px; }
  .work-project h4 { font-size: 19px; }
  .work-project > p { font-size: 16px; }
  .work-route { display: none; }
  .work-paw { display: none; }
}

/* Process section typography follows the Our Work heading scale. */
.process-heading .eyebrow { font-size: clamp(14px, 1.05vw, 18px); margin-bottom: 10px; }
.process-heading h2 { font-size: clamp(43px, 4.35vw, 76px); line-height: 1.03; letter-spacing: -.045em; font-weight: 700; }
@media (max-width: 1250px) {
  .process-heading h2 { font-size: clamp(38px, 4vw, 58px); }
}
@media (max-width: 1023px) {
  .process-heading h2 { font-size: clamp(42px, 7vw, 64px); }
}
@media (max-width: 600px) {
  .process-heading h2 { font-size: clamp(38px, 10vw, 54px); }
}

/* Keep the process road aligned with its numbered stages when increasing title spacing. */
.process { margin-block-start: 48px; }
.process-heading { padding-top: 22px; }
.process-panel { --process-content-offset: clamp(140px, 20vh, 210px); min-height: calc(var(--process-content-offset) + 36cqw + 24px); }
.process-route { top: calc(-1.729cqw + var(--process-content-offset)); }
.process-paws { top: calc(-.8646cqw + var(--process-content-offset)); }
.process-steps { top: var(--process-content-offset); }
@media (max-width: 1023px) {
  .process { margin-block-start: 24px; }
  .process-panel { min-height: 0; padding-top: 16px; }
  .process-heading { padding-top: 0; }
  .process-steps { top: auto; margin-top: clamp(42px, 6vw, 60px); }
}

/* Why Us: three editable blocks inside one viewport-height composition. */
.why-us { margin-block-start: 32px; scroll-margin-top: clamp(76px, 7vw, 112px); }
.why-us .frame { width: min(92%, var(--frame-max)); }
.why-us-panel { min-height: 0; padding: 32px 1% 25px; overflow: hidden; }
.why-us-panel::before { content: ""; position: absolute; inset: 2% -3% 3%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 38% 24% at 15% 22%, var(--brand-fff6ed) 0, transparent 100%), radial-gradient(ellipse 38% 23% at 78% 43%, var(--brand-fff6ed) 0, transparent 100%), radial-gradient(ellipse 42% 25% at 15% 72%, #f8f9fa 0, transparent 100%); }
.why-route { position: absolute; left: -2%; width: 104%; z-index: 0; overflow: visible; pointer-events: none; }
.why-route path { fill: none; stroke: var(--brand-ff6916); stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.why-route-top { top: 0; height: 48%; }
.why-route-bottom { bottom: 0; height: 15%; }
.why-paw { position: absolute; z-index: 1; width: clamp(26px, 2.2vw, 36px); pointer-events: none; }
.why-paw-top { top: 4%; left: 15%; transform: rotate(-12deg); }
.why-paw-bottom { bottom: 5%; right: 9%; transform: rotate(18deg); }
.why-top { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 46%); gap: 2%; align-items: center; }
.why-copy .eyebrow { font-size: clamp(14px, 1.05vw, 18px); margin-bottom: 10px; }
.why-copy h2 { font-size: clamp(43px, 4vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
.why-copy .body-copy { margin-top: 18px; max-width: 750px; font-size: clamp(18px, 1.4vw, 24px); line-height: 1.3; color: #354759; }
.why-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.why-benefits li { display: flex; align-items: center; min-width: 0; min-height: clamp(120px, 8vw, 145px); gap: 12px; padding: 8px; }
.why-benefits li:nth-child(1), .why-benefits li:nth-child(2) { border-bottom: 1px solid var(--brand-f1d9ca); }
.why-benefits li:nth-child(even) { border-left: 1px solid #dddfe0; }
.why-benefit-icon { flex: 0 0 clamp(75px, 7.4vw, 125px); width: clamp(75px, 7.4vw, 125px); aspect-ratio: 1.2; display: grid; place-items: center; background: var(--brand-fff7ee); border-radius: 45% 54% 47% 53% / 52% 46% 54% 45%; }
.why-benefit-icon img { width: 60%; max-height: 70%; object-fit: contain; filter: invert(48%) sepia(96%) saturate(1456%) hue-rotate(2deg) brightness(101%) contrast(105%); }
.why-benefit-icon svg { width: 66%; height: 66%; fill: none; stroke: #111719; stroke-width: 3.7; stroke-linecap: round; stroke-linejoin: round; }
.why-benefit-icon .why-icon-white { fill: #fff; }
.why-benefit-icon .why-icon-accent { stroke: var(--brand-ff6f15); }
.why-benefits strong { display: block; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.15; letter-spacing: -.025em; }
.why-benefits small { display: block; margin-top: 6px; color: #354759; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.25; }
.why-clients, .why-reviews { position: relative; z-index: 2; scroll-margin-top: clamp(76px, 7vw, 112px); }
.why-clients { margin-top: clamp(20px, 2.4vw, 42px); }
.why-clients h3 { position: relative; width: max-content; margin: 0 auto 15px; padding-bottom: 10px; font-size: clamp(25px, 2vw, 34px); letter-spacing: -.035em; }
.why-clients h3::after { content: ""; position: absolute; bottom: 0; left: 35%; width: 30%; height: 2px; background: var(--orange); }
.client-swiper { width: 100%; overflow: hidden; }
.client-swiper .swiper-wrapper { align-items: center; }
.client-logo { display: flex; align-items: center; justify-content: center; height: clamp(74px, 6.2vw, 104px); padding: 7px 10px; border-right: 1px solid #c7cfd3; }
.client-logo img { width: auto; max-width: min(75%, 120px); height: auto; max-height: 52px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.why-reviews { margin-top: clamp(20px, 2.2vw, 36px); }
.why-reviews-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.google-title { display: flex; align-items: center; gap: 17px; }
.google-g { display: inline-block; font: 700 clamp(38px, 3.4vw, 55px)/1 Arial, sans-serif; color: transparent; background: conic-gradient(#4285f4 0 25%, #34a853 25% 43%, #fbbc05 43% 62%, #ea4335 62% 79%, #4285f4 79%); -webkit-background-clip: text; background-clip: text; }
.google-title strong { display: block; font-size: clamp(24px, 2vw, 34px); letter-spacing: -.035em; line-height: 1.1; }
.google-title small { display: block; color: #354759; font-size: clamp(14px, 1.1vw, 18px); }
.why-review-controls { display: flex; gap: 12px; }
.why-review-controls button { display: grid; place-items: center; width: clamp(40px, 3vw, 50px); height: clamp(40px, 3vw, 50px); padding: 12px; border: 1px solid var(--brand-ff781b); border-radius: 50%; color: var(--orange); background: #fff; }
.why-review-controls button:hover { background: var(--brand-fff2e5); }
.why-review-controls button img { width: 100%; height: 100%; object-fit: contain; filter: invert(47%) sepia(100%) saturate(2109%) hue-rotate(359deg); }
.review-swiper { width: 100%; overflow: hidden; padding: 5px 4px 15px; }
.review-swiper .swiper-wrapper { align-items: stretch; }
.google-review { position: relative; height: auto; min-height: clamp(185px, 13vw, 220px); padding: clamp(16px, 1.4vw, 24px); border: 1px solid #e2e4e5; border-radius: 20px; background: #fff; box-shadow: 0 5px 18px #25344314; transition: border-color .25s ease, box-shadow .25s ease; }
.google-review.swiper-slide-active { border-color: var(--brand-ff6f15); box-shadow: 0 7px 22px var(--brand-ff79001c); }
.review-card-head { display: flex; align-items: center; gap: 14px; }
.review-avatar { position: relative; flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; background: var(--brand-fff3ea); }
.review-avatar::before { content: ""; position: absolute; left: 21px; top: 11px; width: 13px; height: 13px; border: 2px solid var(--orange); border-radius: 50%; }
.review-avatar::after { content: ""; position: absolute; left: 14px; top: 28px; width: 27px; height: 15px; border: 2px solid var(--orange); border-radius: 17px 17px 6px 6px; }
.review-card-head strong { display: block; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.12; }
.review-card-head small { display: block; margin-top: 3px; color: #354759; font-size: clamp(14px, 1.05vw, 17px); }
.review-google { margin-left: auto; font-size: 34px; }
.review-stars { margin-top: 11px; color: #83919c; font-size: 26px; letter-spacing: 2px; line-height: 1; }
.google-review p { max-width: 90%; margin-top: 9px; color: #334553; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.28; }
.review-quote { position: absolute; right: 16px; bottom: 10px; color: var(--brand-ff5717); font: 700 60px/1 Georgia, serif; }
.why-next { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; width: max-content; margin: 1px auto 0; color: #304253; font-size: 15px; }
.why-next .scroll-mark { display: block; }
@media (max-width: 1200px) {
  .why-top { grid-template-columns: 1fr; gap: 28px; }
  .why-copy h2 { font-size: clamp(43px, 5vw, 65px); }
  .why-benefits { max-width: 950px; }
  .why-benefits li { min-height: 112px; }
}
@media (max-width: 700px) {
  .why-us .frame { width: calc(100% - 32px); }
  .client-swiper { width: 100%; }
  .why-us { margin-block-start: 16px; }
  .why-us-panel { padding: 24px 0 30px; }
  .why-copy h2 { font-size: clamp(36px, 9vw, 54px); }
  .why-copy .body-copy { font-size: 16px; }
  .why-benefits { grid-template-columns: 1fr; gap: 0; }
  .why-benefits li { min-height: 92px; border-bottom: 1px solid var(--brand-f1d9ca); border-left: 0 !important; }
  .why-benefits li:last-child { border-bottom: 0; }
  .why-benefit-icon { flex-basis: 72px; width: 72px; }
  .why-benefits strong { font-size: 17px; }
  .why-benefits small { font-size: 14px; }
  .why-clients { margin-top: 30px; }
  .why-reviews { margin-top: 28px; }
  .google-title { gap: 10px; }
  .google-title strong { font-size: 23px; }
  .google-title small { font-size: 13px; }
  .google-g { font-size: 40px; }
  .review-google { font-size: 31px; }
  .google-review { min-height: 190px; }
  .why-route { display: none; }
  .why-paw { display: none; }
}

/* FAQ: illustration and native single-open questions. */
.faq { margin-block-start: 32px; scroll-margin-top: clamp(76px, 7vw, 112px); }
.faq .frame { width: min(92%, var(--frame-max)); }
.faq-panel { min-height: 0; padding: 40px 1% 24px; overflow: hidden; }
.faq-panel::before { content: ""; position: absolute; inset: 4% -2% 5%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 48% 48% at 16% 48%, var(--brand-fff5e9) 0, transparent 100%), radial-gradient(ellipse 48% 38% at 86% 70%, #f5f7f8 0, transparent 100%); }
.faq-route { position: absolute; left: -2%; width: 104%; z-index: 0; overflow: visible; pointer-events: none; }
.faq-route path { fill: none; stroke: var(--brand-ff6916); stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.faq-route-top { top: 0; height: 34%; }
.faq-route-bottom { bottom: 0; height: 14%; }
.faq-paw { position: absolute; z-index: 1; width: clamp(26px, 2.2vw, 36px); pointer-events: none; }
.faq-paw-top { left: 15%; top: 4%; transform: rotate(-12deg); }
.faq-paw-bottom { right: 8%; bottom: 5%; transform: rotate(17deg); }
.faq-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 39%) minmax(0, 59%); gap: 2%; align-items: start; }
.faq-intro .eyebrow { font-size: clamp(14px, 1.05vw, 18px); margin-bottom: 10px; }
.faq-intro h2 { font-size: clamp(44px, 4.35vw, 76px); line-height: 1.02; letter-spacing: -.045em; }
.faq-intro .body-copy { max-width: 590px; margin-top: 16px; color: #354759; font-size: clamp(18px, 1.35vw, 23px); line-height: 1.35; }
.faq-media { position: relative; width: min(100%, 400px); aspect-ratio: 520 / 330; margin: clamp(18px, 2vw, 32px) auto 4px; overflow: visible; }
.faq-illustration { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.faq-intro h3 { margin-top: 2px; font-size: clamp(24px, 2vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.faq-contact { min-height: 58px; margin-top: 14px; padding: 12px 35px; border-radius: 30px; font-size: clamp(17px, 1.3vw, 22px); }
.faq-contact img { width: 22px; height: 22px; }
.faq-list { display: grid; gap: clamp(9px, .9vw, 15px); }
.faq-item { min-width: 0; border: 1px solid #d8dce4; border-radius: clamp(16px, 1.4vw, 24px); background: #fff; box-shadow: 0 3px 12px #1b29320b; transition: border-color .2s ease, background .2s ease; }
.faq-item[open] { border-color: var(--brand-ff6d1b); background: linear-gradient(125deg, var(--brand-fff9f4), #fff); }
.faq-item summary { display: grid; grid-template-columns: clamp(44px, 4vw, 64px) minmax(0, 1fr) clamp(38px, 3.5vw, 54px); align-items: center; gap: 8px; min-height: clamp(76px, 5.4vw, 91px); padding: 12px clamp(18px, 1.8vw, 30px); list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { align-items: start; padding-top: clamp(20px, 1.65vw, 28px); padding-bottom: 0; }
.faq-number { color: #8b939f; font-size: clamp(22px, 1.75vw, 30px); font-weight: 700; line-height: 1.2; }
.faq-item[open] .faq-number { color: var(--brand-ff521d); }
.faq-question { font-size: clamp(20px, 1.75vw, 29px); font-weight: 700; line-height: 1.17; letter-spacing: -.03em; }
.faq-toggle { position: relative; justify-self: end; width: clamp(38px, 3.5vw, 54px); height: clamp(38px, 3.5vw, 54px); border-radius: 50%; background: #f0f1f4; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; border-radius: 2px; background: #77808e; transform: translate(-50%, -50%); }
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-toggle { background: var(--brand-ff4d1c); }
.faq-item[open] .faq-toggle::before { background: #fff; }
.faq-toggle { transition: background .25s ease; }
.faq-toggle::after { transition: transform .3s ease, opacity .2s ease; }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq-answer { max-width: 790px; margin: 8px clamp(72px, 6vw, 98px) 24px clamp(70px, 6.1vw, 100px); color: #334553; font-size: clamp(18px, 1.35vw, 23px); line-height: 1.4; }
.faq-next { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; width: max-content; margin: 15px auto 0; color: #304253; font-size: 15px; }
.faq-next .scroll-mark { display: block; }
@media (max-width: 1100px) {
  .faq-grid { grid-template-columns: minmax(0, 43%) minmax(0, 55%); }
  .faq-intro h2 { font-size: clamp(42px, 4.6vw, 58px); }
  .faq-question { font-size: clamp(18px, 2vw, 23px); }
}
@media (max-width: 850px) {
  .faq .frame { width: calc(100% - 32px); }
  .faq { margin-block-start: 16px; }
  .faq-panel { padding: 24px 0 34px; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-intro h2 { font-size: clamp(39px, 7.7vw, 64px); }
  .faq-intro .body-copy { font-size: 17px; }
  .faq-media { width: min(100%, 380px); }
  .faq-list { gap: 10px; }
  .faq-route, .faq-paw { display: none; }
}
@media (max-width: 550px) {
  .faq-intro h2 { font-size: clamp(37px, 10vw, 52px); }
  .faq-media { width: min(100%, 320px); }
  .faq-item summary { grid-template-columns: 34px minmax(0, 1fr) 38px; min-height: 70px; padding: 12px; gap: 6px; }
  .faq-number { font-size: 19px; }
  .faq-question { font-size: 17px; }
  .faq-answer { margin: 9px 16px 21px 52px; font-size: 15px; }
  .faq-intro h3 { font-size: 24px; }
}

/* FAQ question dialog. */
.question-dialog { width: min(620px, calc(100% - 32px)); max-height: min(90svh, 820px); padding: 0; border: 0; border-radius: 26px; color: var(--ink); background: #fff; box-shadow: 0 28px 85px #101a2740; overflow: auto; }
.question-dialog::backdrop { background: #101a2880; backdrop-filter: blur(5px); }
.question-dialog[open] { animation: question-dialog-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.question-dialog[open]::backdrop { animation: question-backdrop-in .34s ease both; }
.question-dialog.is-closing { animation: question-dialog-out .2s ease-in both; }
.question-dialog.is-closing::backdrop { animation: question-backdrop-out .2s ease-in both; }
.question-dialog-inner { position: relative; isolation: isolate; padding: clamp(26px, 4vw, 46px); overflow: hidden; }
.question-dialog-glow { position: absolute; z-index: -1; width: 360px; height: 260px; right: -110px; top: -120px; border-radius: 50%; background: radial-gradient(circle, var(--brand-ffdbb7), transparent 70%); pointer-events: none; }
.question-dialog-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #e4e7ea; border-radius: 50%; background: #fff; color: #364452; font-size: 27px; line-height: 1; }
.question-dialog-close:hover { border-color: var(--brand-ff8a34); color: var(--orange-deep); }
.question-dialog .eyebrow { margin-bottom: 9px; font-size: 14px; }
.question-dialog h2 { max-width: 460px; font-size: clamp(31px, 5vw, 44px); line-height: 1.08; letter-spacing: -.04em; }
.question-dialog-desc { margin-top: 12px; color: #405263; font-size: 16px; line-height: 1.5; }
.question-dialog form { display: grid; gap: 14px; margin-top: 25px; }
.question-dialog label { display: grid; gap: 7px; font-size: 14px; font-weight: 700; color: #1c2932; }
.question-dialog input, .question-dialog textarea { width: 100%; padding: 13px 15px; border: 1px solid #d4d9de; border-radius: 11px; outline: none; background: #fff; color: var(--ink); font: 400 16px/1.4 Arial, Helvetica, sans-serif; transition: border-color .18s ease, box-shadow .18s ease; }
.question-dialog textarea { min-height: 110px; resize: vertical; }
.question-dialog input::placeholder, .question-dialog textarea::placeholder { color: #8a969f; }
.question-dialog input:focus, .question-dialog textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px var(--brand-ff790021); }
.question-form-note { color: #526270; font-size: 13px; line-height: 1.4; }
.question-form-status { min-height: 0; color: #2e5365; font-size: 13px; line-height: 1.4; }
.question-form-status:empty { display: none; }
.question-submit { width: max-content; min-height: 50px; padding: 12px 22px; border-radius: 11px; font-size: 15px; cursor: pointer; }
.question-submit img { width: 19px; height: 19px; }
@keyframes question-dialog-in { from { opacity: 0; transform: translateY(22px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes question-dialog-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes question-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes question-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 550px) {
  .question-dialog { width: calc(100% - 20px); border-radius: 20px; }
  .question-dialog-inner { padding: 26px 20px; }
  .question-dialog-close { top: 12px; right: 12px; }
  .question-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .question-dialog[open], .question-dialog[open]::backdrop, .question-dialog.is-closing, .question-dialog.is-closing::backdrop { animation: none; }
}


/* Final contact composition, matching the supplied reference. */
.contact-ending { position: relative; z-index: 1; margin-top: 32px; }
.contact-section { position: relative; isolation: isolate; padding: 40px 0 clamp(65px, 5.8vw, 100px); overflow: hidden; }
.contact-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 26% 24% at 22% 25%, var(--brand-fff5eb) 15%, transparent 100%), radial-gradient(ellipse 22% 19% at 28% 72%, var(--brand-fff5ed) 15%, transparent 100%), radial-gradient(ellipse 20% 24% at 0% 59%, #f4f5f6, transparent 100%), radial-gradient(ellipse 16% 24% at 99% 32%, #f4f5f6, transparent 100%), radial-gradient(ellipse 14% 20% at 39% 90%, #f4f5f6, transparent 100%); }
.contact-layout.frame { width: min(85%, var(--frame-max)); display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 53%); gap: 4%; align-items: start; }
.contact-trail { position: absolute; inset: 0 0 auto; width: 100%; height: clamp(75px, 7.2vw, 120px); pointer-events: none; }
.contact-trail path { fill: none; stroke: var(--brand-ff541d); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.contact-paw { position: absolute; left: 19.6%; top: 4.3%; width: clamp(25px, 2.2vw, 38px); transform: rotate(-12deg); pointer-events: none; }
.contact-copy { padding-top: 12px; }
.contact-copy .eyebrow { font-size: clamp(14px, 1.3vw, 22px); font-weight: 400; margin-bottom: 12px; color: var(--orange-deep); }
.contact-copy h2 { font-size: clamp(40px, 4.35vw, 76px); line-height: 1.03; letter-spacing: -.045em; }
.contact-copy h2 em { color: var(--orange); }
.contact-description { max-width: 570px; margin-top: 20px; font-size: clamp(18px, 1.58vw, 27px); line-height: 1.3; color: #25466c; }
.contact-consultation { display: inline-flex; align-items: center; justify-content: center; gap: 15px; margin-top: 28px; padding: 13px 23px; min-height: 62px; border: 2px solid var(--orange); border-radius: 40px; color: var(--orange); font-size: clamp(17px, 1.45vw, 24px); font-weight: 700; }
.contact-consultation img { width: 32px; height: 32px; filter: invert(48%) sepia(96%) saturate(1456%) hue-rotate(2deg) brightness(101%) contrast(105%); }
.contact-consultation > span { font-size: 32px; line-height: 1; font-weight: 400; }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; margin-top: 29px; }
.contact-details > div { display: flex; align-items: center; gap: 20px; min-width: 0; }
.contact-details > div + div { border-left: 1px solid #d4d9e2; padding-left: 25px; }
.contact-detail-icon { flex: 0 0 57px; width: 57px; height: 57px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-fff0e7); }
.contact-detail-icon img { width: 32px; height: 32px; filter: invert(48%) sepia(96%) saturate(1456%) hue-rotate(2deg) brightness(101%) contrast(105%); }
.contact-details p { display: grid; gap: 3px; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.3; color: #788297; }
.contact-details strong { color: #101516; font-size: clamp(17px, 1.15vw, 20px); }
.contact-form-area h3 { font-size: clamp(29px, 2.7vw, 46px); line-height: 1.12; letter-spacing: -.04em; margin-bottom: 18px; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contact-fields label { display: grid; gap: 8px; font-size: clamp(15px, 1.05vw, 18px); color: #10182b; line-height: 1.3; }
.contact-fields input, .contact-fields textarea { width: 100%; min-width: 0; border: 1px solid #d7dce5; border-radius: 11px; background: #f5f6f8b3; padding: 14px 18px; color: #182631; font: 400 clamp(15px, 1vw, 17px)/1.4 Arial, Helvetica, sans-serif; }
.contact-fields input { height: 51px; }
.contact-fields textarea { min-height: 110px; resize: vertical; }
.contact-fields input::placeholder, .contact-fields textarea::placeholder { color: #949bab; }
.contact-fields input:focus, .contact-fields textarea:focus { outline: 2px solid var(--brand-ff79004d); outline-offset: 2px; border-color: var(--orange); }
.contact-goals { grid-column: 1 / -1; }
.contact-form-note { margin-top: 11px; font-size: clamp(13px, .9vw, 15px); color: #7c869b; }
.contact-send { display: inline-flex; align-items: center; justify-content: center; gap: 15px; border: 1px solid var(--orange); background: linear-gradient(110deg, var(--brand-ff8509), var(--brand-ff7300)); box-shadow: inset 0 0 0 1px var(--brand-ffb26070); color: #fff; border-radius: 32px; min-height: 52px; padding: 11px 31px; margin-top: 14px; font-size: clamp(16px, 1.15vw, 20px); font-weight: 700; }
.contact-send span { font-size: 26px; font-weight: 400; line-height: 1; }
.contact-send:hover { background: var(--brand-ed6900); }
.contact-form-status { color: #40556b; font-size: 14px; line-height: 1.4; margin-top: 10px; }
.contact-form-status:empty { display: none; }
.contact-footer { position: relative; z-index: 2; isolation: isolate; background: #111819; color: #fff; padding: 12px 0 22px; }
.contact-footer-wave { position: absolute; z-index: -1; left: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(65px, 6vw, 100px); fill: #111819; }
.contact-footer-content { position: relative; width: 60%; max-width: 1100px; margin: 0 auto; z-index: 2; }
.contact-footer-grid { display: grid; grid-template-columns: 1.45fr 1fr 1.3fr; padding: 0 6% 25px; gap: 5%; align-items: start; }
.contact-footer-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: .9; }
.contact-footer-logo > span { font-size: clamp(42px, 4.4vw, 75px); font-weight: 800; letter-spacing: -.07em; }
.contact-footer-logo em { color: var(--brand-ff4b16); }
.contact-footer-logo small { font-size: clamp(15px, 1.5vw, 25px); letter-spacing: .39em; padding-left: .39em; margin-top: 8px; }
.contact-footer-brand p { color: #afbbc5; margin-top: 16px; font-size: clamp(13px, 1.1vw, 19px); line-height: 1.4; }
.contact-socials { display: flex; gap: 17px; margin-top: 12px; }
.contact-socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #e1e7e9; border-radius: 50%; }
.contact-socials img { width: 23px; height: 23px; filter: brightness(0) invert(1); }
.contact-footer-column { border-left: 1px solid #566269; padding-left: 25%; margin-top: 28px; min-height: 145px; }
.contact-footer-column h3 { font-size: clamp(17px, 1.2vw, 21px); line-height: 1.2; margin-bottom: 13px; }
.contact-footer-column li { font-size: clamp(14px, 1vw, 17px); color: #c3cbd1; line-height: 1.9; }
.contact-footer a:hover { color: var(--brand-ff8b48); }
.contact-footer-tiger, .contact-footer-goat { position: absolute; width: 18%; max-width: 320px; bottom: 30px; z-index: 1; }
.contact-footer-tiger { left: 1%; transform: scaleX(-1); }
.contact-footer-goat { right: 1%; }
.contact-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #819099; padding: 12px 10px 0; color: #bdc7cf; font-size: clamp(11px, .8vw, 14px); }
.contact-footer-bottom small { font-size: inherit; }
.contact-footer-bottom nav { display: flex; align-items: center; gap: 22px; }
.contact-back-top { display: grid; place-items: center; border: 1px solid #c1cbd2; border-radius: 50%; width: 35px; height: 35px; font-size: 27px; line-height: 1; }
@media (max-width: 1100px) {
  .contact-layout.frame { width: 90%; }
  .contact-copy h2 { font-size: clamp(38px, 4.35vw, 52px); }
  .contact-details > div { gap: 10px; }
  .contact-details > div + div { padding-left: 12px; }
  .contact-detail-icon { flex-basis: 43px; width: 43px; height: 43px; }
  .contact-fields { gap: 19px 16px; }
  .contact-footer-content { width: 65%; }
  .contact-footer-grid { padding-inline: 0; }
  .contact-footer-column { padding-left: 18%; }
  .contact-footer-bottom nav { gap: 12px; }
}
@media (max-width: 800px) {
  .contact-ending { margin-top: 14px; }
  .contact-section { padding: 24px 0 90px; }
  .contact-layout.frame { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 38px; }
  .contact-copy h2 { font-size: clamp(39px, 7vw, 58px); }
  .contact-description { font-size: 19px; }
  .contact-details { max-width: 550px; }
  .contact-form-area h3 { font-size: 32px; }
  .contact-footer { padding-top: 10px; }
  .contact-footer-content { width: calc(100% - 40px); }
  .contact-footer-grid { grid-template-columns: 1.3fr 1fr 1fr; padding-bottom: 140px; gap: 20px; }
  .contact-footer-column { padding-left: 18px; margin-top: 12px; }
  .contact-footer-tiger, .contact-footer-goat { width: 140px; bottom: 73px; }
  .contact-footer-logo > span { font-size: 48px; }
  .contact-footer-logo small { font-size: 17px; }
  .contact-socials { gap: 10px; }
  .contact-socials a { width: 34px; height: 34px; }
}
@media (max-width: 500px) {
  .contact-layout.frame { width: calc(100% - 32px); }
  .contact-copy h2 { font-size: clamp(34px, 8.7vw, 44px); }
  .contact-fields { grid-template-columns: 1fr; gap: 17px; }
  .contact-details > div { gap: 8px; }
  .contact-details p { font-size: 12px; }
  .contact-details strong { font-size: 16px; }
  .contact-consultation { min-height: 54px; padding: 10px 18px; gap: 10px; }
  .contact-footer-grid { grid-template-columns: 1fr 1fr; padding-bottom: 140px; }
  .contact-footer-brand { grid-column: 1 / -1; }
  .contact-footer-column { margin-top: 0; }
  .contact-footer-bottom { flex-direction: column; align-items: flex-start; font-size: 11px; }
  .contact-footer-bottom nav { gap: 13px; width: 100%; }
  .contact-back-top { margin-left: auto; }
  .contact-footer-tiger, .contact-footer-goat { width: 125px; bottom: 105px; }
}


/* Visual polish: shared type, colour and component rhythm.
 * Section margins and the hand-shaped About backdrop remain defined above.
 */
::selection { color: var(--ink); background: var(--brand-ffe0c2); }
h1, h2, h3 { text-wrap: balance; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 4px; }

/* Clear type hierarchy across the existing sections. */
.hero .eyebrow, .about-copy .eyebrow, .solutions-intro-copy .eyebrow,
.work-intro .eyebrow, .work-featured .eyebrow, .process-heading .eyebrow,
.why-copy .eyebrow, .faq-intro .eyebrow, .contact-copy .eyebrow,
.question-dialog .eyebrow {
  margin-bottom: 14px; color: var(--orange-deep);
  font-size: clamp(12px, .95vw, 15px); font-weight: 700; line-height: 1.5; letter-spacing: .075em;
}
.about-copy h2, .solutions-intro-copy h2, .work-intro h2,
.process-heading h2, .why-copy h2, .faq-intro h2, .contact-copy h2 {
  font-size: var(--heading-size); line-height: 1.1; letter-spacing: -.04em;
}
.hero h1 { font-size: clamp(42px, 4.2cqw, 68px); line-height: 1.1; letter-spacing: -.045em; }
.hero-intro, .about-copy .body-copy, .solutions-intro-copy .body-copy,
.work-intro .body-copy, .why-copy .body-copy, .faq-intro .body-copy,
.contact-description {
  color: var(--muted); font-size: var(--body-size); line-height: 1.65;
}
.about-copy h2 { margin-bottom: 22px; }
.solutions-intro-copy .body-copy, .work-intro .body-copy,
.why-copy .body-copy, .faq-intro .body-copy, .contact-description { margin-top: 20px; }

/* Header, buttons and navigation details. */
.site-header { background: rgb(255 255 255 / .97); box-shadow: 0 1px 0 rgb(24 35 43 / .06), 0 6px 24px rgb(24 35 43 / .025); }
.primary-nav-list > li > a:not(.button) { transition: color .18s ease; }
.button, .contact-send, .contact-consultation {
  max-width: 100%; white-space: normal; text-align: center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.button img, .contact-consultation img { flex-shrink: 0; }
.button-orange, .contact-send {
  color: var(--ink);
  background: linear-gradient(115deg, var(--brand-ff8a19), var(--orange));
  box-shadow: inset 0 1px 0 #ffffff30, 0 5px 14px var(--brand-ff79001a);
}
.button-orange img { filter: brightness(0); }
.button-orange:hover, .contact-send:hover { background: var(--brand-e96a00); box-shadow: 0 7px 20px var(--brand-ff79002b); }
.button-outline { border-color: #c5cdd3; background: #fff; }
.button-outline:hover { border-color: var(--orange); background: var(--orange-soft); }
.hero .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
.hero .button { width: 100%; min-width: 0; min-height: 52px; padding: 14px 12px; gap: 8px; border-radius: 12px; font-size: clamp(13px, 1vw, 16px); line-height: 1.4; }
.hero .button img { width: 20px; height: 20px; }
/* Keep each divider between columns, including when a label wraps. */
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0; white-space: normal; line-height: 1.45; }
.hero-facts li { min-width: 0; gap: 8px; padding-inline: clamp(8px, .85cqw, 14px); }
.hero-facts li:first-child { padding-left: 0; }
.hero-facts li:last-child { padding-right: 0; }
.hero-facts img { flex-shrink: 0; width: clamp(24px, 2cqw, 32px); height: clamp(24px, 2cqw, 32px); }
.scroll-cue, .work-next, .why-next, .faq-next { color: var(--muted); font-size: 12px; letter-spacing: .045em; }
.work-next, .why-next, .faq-next { margin-top: 28px; gap: 10px; }
.scroll-mark { background: #fff; transition: background .2s ease, border-color .2s ease; }
a:hover > .scroll-mark { border-color: var(--orange); background: var(--orange-soft); }

/* About values: give each label room without moving the illustration. */
.about-points strong { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.3; letter-spacing: -.02em; }
.about-points span { margin-top: 8px; color: var(--muted); font-size: clamp(13px, 1vw, 16px); line-height: 1.5; }
.about-points li + li { border-color: var(--border-warm); }
@media (min-width: 1024px) {
  .about-points li { grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 0; padding-inline: clamp(10px, 1.2cqw, 20px); }
  .about-points li:first-child { padding-left: 0; }
  .about-points img { width: clamp(32px, 2.8cqw, 46px); }
}

/* Solutions and portfolio: softer surfaces and more breathing room. */
.solution-icon { margin-bottom: 18px; border-color: var(--border-warm); box-shadow: var(--shadow-soft); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.solution-icon .accent-fill { fill: var(--orange); }
.solution-icon .accent-stroke, .work-scope-item .work-icon-accent,
.why-benefit-icon .why-icon-accent { stroke: var(--orange); }
.solution-item strong { font-size: clamp(16px, 1.25vw, 21px); line-height: 1.35; letter-spacing: -.02em; }
.solution-item a > span:last-child { max-width: 28ch; margin-top: 9px; padding-inline: 4px; color: var(--muted); font-size: clamp(14px, 1vw, 16px); line-height: 1.55; }
.solution-item a[href]:is(:hover, :focus-visible) .solution-icon { border-color: var(--orange); background: var(--brand-fffaf5); box-shadow: 0 8px 24px var(--brand-ff790018); }
.work-scope-item { color: var(--muted); font-size: clamp(16px, 1.3vw, 22px); line-height: 1.45; }
.work-featured { margin-top: clamp(36px, 3.5vw, 56px); }
.work-featured h3 { font-size: clamp(32px, 3.3vw, 52px); line-height: 1.12; letter-spacing: -.035em; }
.work-featured > p:last-child { margin-top: 12px; color: var(--muted); font-size: var(--body-size); line-height: 1.55; }
.work-project-grid { margin-top: 28px; row-gap: 28px; }
.work-project h4 { margin-top: 16px; font-size: clamp(17px, 1.2vw, 21px); line-height: 1.35; letter-spacing: -.02em; }
.work-project > p { margin-top: 5px; color: var(--muted); font-size: clamp(14px, 1vw, 16px); line-height: 1.5; }
.step h3 { font-size: clamp(17px, 1.44cqw, 24px); line-height: 1.3; }
.step p { color: var(--muted); font-size: clamp(13px, 1.08cqw, 18px); line-height: 1.6; }

/* Clients and reviews keep their existing Swiper structure. */
.why-benefits strong { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.35; }
.why-benefits small { color: var(--muted); line-height: 1.5; }
.why-benefits li:nth-child(1), .why-benefits li:nth-child(2) { border-bottom-color: var(--border-warm); }
.why-benefits li:nth-child(even) { border-left-color: var(--border); }
.why-clients { margin-top: clamp(32px, 3vw, 48px); }
.why-clients h3 { margin-bottom: 20px; font-size: clamp(25px, 2vw, 32px); line-height: 1.25; }
.client-logo { border-color: var(--border); }
.client-logo img { opacity: .85; }
.why-reviews { margin-top: clamp(32px, 3vw, 48px); }
.why-reviews-heading { gap: 16px; margin-bottom: 18px; }
.google-title strong { font-size: clamp(23px, 2vw, 32px); line-height: 1.2; }
.google-title small { margin-top: 4px; color: var(--muted); font-size: 14px; }
.why-review-controls { flex-shrink: 0; gap: 10px; }
.why-review-controls button { width: 44px; height: 44px; border-color: var(--border-warm); transition: background .2s ease, border-color .2s ease; }
.why-review-controls button:hover { border-color: var(--orange); background: var(--orange-soft); }
.google-review { padding: clamp(20px, 1.6vw, 28px); border-color: var(--border); border-radius: 20px; box-shadow: var(--shadow-soft); }
.google-review.swiper-slide-active { border-color: var(--orange); box-shadow: 0 8px 24px var(--brand-ff790014); }
.review-card-head { gap: 12px; }
.review-card-head > span:nth-child(2) { min-width: 0; }
.review-card-head strong { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.3; }
.review-card-head small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.review-google { flex-shrink: 0; }
.review-stars { margin-top: 16px; color: #788691; font-size: 24px; }
.google-review p { margin-top: 12px; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; color: var(--muted); }
.review-quote { color: var(--orange); opacity: .8; }

/* FAQ spacing follows the summary columns in both open and closed states. */
.faq-item {
  --faq-inset: clamp(16px, 1.6vw, 26px);
  --faq-number-width: clamp(32px, 3.2vw, 48px);
  --faq-toggle-size: clamp(36px, 3vw, 46px);
  --faq-column-gap: 12px;
  border-color: var(--border); border-radius: 18px; box-shadow: 0 3px 14px rgb(24 35 43 / .035);
}
.faq-item[open] { border-color: var(--orange); background: linear-gradient(120deg, var(--brand-fff8f1), #fff 75%); }
.faq-item summary, .faq-item[open] summary {
  grid-template-columns: var(--faq-number-width) minmax(0, 1fr) var(--faq-toggle-size);
  align-items: center; gap: var(--faq-column-gap); min-height: 80px; padding: 18px var(--faq-inset);
}
.faq-item summary:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: -5px; border-radius: inherit; }
.faq-question { font-size: clamp(18px, 1.45vw, 24px); line-height: 1.4; letter-spacing: -.02em; }
.faq-number { font-size: clamp(18px, 1.4vw, 23px); font-variant-numeric: tabular-nums; }
.faq-item[open] .faq-number { color: var(--orange-deep); }
.faq-toggle { width: var(--faq-toggle-size); height: var(--faq-toggle-size); background: #f1f4f6; }
.faq-toggle::before, .faq-toggle::after { width: 16px; height: 2px; }
.faq-item[open] .faq-toggle { background: var(--orange); }
.faq-answer {
  margin: 0 calc(var(--faq-inset) + var(--faq-toggle-size) + var(--faq-column-gap)) 24px calc(var(--faq-inset) + var(--faq-number-width) + var(--faq-column-gap));
  font-size: clamp(16px, 1.15vw, 19px); line-height: 1.7; color: var(--muted);
}
.faq-intro h3 { margin-top: 16px; font-size: clamp(23px, 1.85vw, 30px); line-height: 1.3; }
.faq-contact { min-height: 52px; margin-top: 18px; padding: 14px 28px; border-radius: 12px; font-size: 16px; }

/* A defined contact surface and consistent, readable form controls. */
.contact-form-area { min-width: 0; padding: clamp(24px, 2.3vw, 38px); border: 1px solid var(--border); border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
.contact-form-area h3 { margin-bottom: 26px; font-size: clamp(27px, 2.3vw, 36px); line-height: 1.2; letter-spacing: -.03em; }
.contact-fields { column-gap: 20px; row-gap: 22px; }
.contact-fields label, .question-dialog label { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.contact-fields input, .contact-fields textarea, .question-dialog input, .question-dialog textarea {
  border-color: #d7dde2; border-radius: 10px; background: var(--surface); color: var(--ink);
  padding: 14px 16px; font-size: 16px; line-height: 1.5;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-fields input { height: 52px; }
.contact-fields textarea { min-height: 130px; }
.contact-fields input::placeholder, .contact-fields textarea::placeholder,
.question-dialog input::placeholder, .question-dialog textarea::placeholder { color: #737f88; }
.contact-fields input:focus, .contact-fields textarea:focus,
.question-dialog input:focus, .question-dialog textarea:focus {
  outline: 2px solid var(--orange-deep); outline-offset: 2px;
  border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px var(--brand-ff790012);
}
.contact-form-note, .question-form-note { margin-top: 14px; color: #66737e; font-size: 13px; line-height: 1.6; }
.contact-send { margin-top: 20px; border-radius: 12px; font-size: 16px; }
.contact-consultation { min-height: 54px; padding: 12px 22px; gap: 12px; border-width: 1px; border-radius: 12px; color: var(--orange-deep); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.4; }
.contact-consultation:hover { background: var(--orange-soft); }
.contact-consultation img { width: 26px; height: 26px; }
.contact-details { margin-top: 32px; gap: 16px; }
.contact-details > div { gap: 12px; }
.contact-details > div + div { border-color: var(--border); padding-left: 16px; }
.contact-details p { min-width: 0; color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.contact-details strong { font-size: 17px; }
.contact-detail-icon { flex-basis: 44px; width: 44px; height: 44px; background: var(--orange-soft); }
.contact-detail-icon img { width: 25px; height: 25px; }
.question-dialog-desc { color: var(--muted); line-height: 1.6; }
.question-dialog .eyebrow, .question-dialog h2 { padding-right: 24px; }

/* Footer surfaces and links. */
.contact-footer { background: var(--footer); }
.contact-footer-wave { fill: var(--footer); }
.contact-footer-logo em { color: var(--orange); }
.contact-footer-brand p { line-height: 1.6; }
.contact-footer-column { border-color: #ffffff24; }
.contact-footer-column li { font-size: clamp(14px, 1vw, 16px); line-height: 1.6; }
.contact-footer-column a { display: inline-block; padding-block: 5px; }
.contact-footer-bottom { flex-wrap: wrap; border-color: #ffffff24; padding-top: 18px; line-height: 1.5; }
.contact-footer-bottom nav { flex-wrap: wrap; row-gap: 12px; }
.contact-socials a { border-color: #ffffff45; transition: border-color .2s ease, background .2s ease; }
.contact-socials a:hover { border-color: var(--orange); background: #ffffff0c; }
.contact-back-top { width: 40px; height: 40px; flex-shrink: 0; border-color: #ffffff45; }

@media (min-width: 1024px) and (max-width: 1250px) {
  .header-panel { padding-inline: 0; gap: 16px; }
  .brand { flex-basis: 125px; }
  .primary-nav { font-size: 12px; }
  .primary-nav-list { gap: 14px; }
  .header-action { padding-inline: 14px; font-size: 11px; }
}
@media (max-width: 1023px) {
  :root { --heading-size: clamp(34px, 5.4vw, 52px); --body-size: 16px; }
  .hero h1 { font-size: clamp(36px, 7.4vw, 58px); }
  .primary-nav { border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card); }
  .primary-nav-list > li > a:not(.button) { padding-block: 14px; }
  .primary-nav .header-action { font-size: 13px; }
  .hero .button { min-height: 48px; padding: 13px 18px; font-size: 14px; }
  .about-points strong { font-size: 17px; }
  .about-points span { font-size: 14px; }
  .solution-items { --solution-line-gap: 8px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 15px; }
}
@media (min-width: 601px) and (max-width: 1023px) {
  .work-intro h2 { font-size: clamp(32px, 4.4vw, 45px); }
}
@media (max-width: 800px) {
  .contact-layout.frame { gap: 32px; }
  .contact-form-area { padding: 24px; }
  .contact-footer-column a { min-height: 40px; padding-block: 9px; }
}
@media (max-width: 600px) {
  :root { --heading-size: clamp(32px, 8.5vw, 44px); }
  .hero h1 { font-size: clamp(34px, 8.6vw, 48px); }
  .hero .button-row { grid-template-columns: 1fr; }
  .hero .button { width: 100%; }
  .hero-facts { font-size: 11px; }
  .hero-facts li { flex-direction: column; justify-content: flex-start; padding-inline: 8px; text-align: center; }
  .hero-facts li + li { border-left: 1px solid var(--border-warm); }
  .solution-item strong { font-size: 16px; }
  .solution-item a > span:last-child { font-size: 14px; }
  .work-featured h3 { font-size: clamp(30px, 8vw, 40px); }
  .work-scope-item { font-size: 17px; }
  .why-reviews-heading { flex-wrap: wrap; align-items: center; }
  .why-review-controls { margin-left: auto; }
  .faq-item { --faq-inset: 14px; --faq-number-width: 28px; --faq-toggle-size: 34px; --faq-column-gap: 8px; }
  .faq-item summary, .faq-item[open] summary { min-height: 74px; padding-block: 16px; }
  .faq-question { font-size: 17px; }
  .faq-answer { margin-right: var(--faq-inset); margin-bottom: 20px; font-size: 15px; }
  .contact-details { grid-template-columns: 1fr; gap: 18px; }
  .contact-details > div + div { padding-left: 0; border-left: 0; }
  .contact-form-area { padding: 22px 18px; border-radius: 20px; }
  .contact-send { width: 100%; }
  .contact-socials a { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  .contact-footer-bottom nav { gap: 10px; font-size: 10px; }
}


/* AOS: short, consistent movements; About retains its own rotation. */
[data-aos][data-aos] {
  --aos-x: 0px; --aos-y: 0px; --aos-scale: 1;
  transform: translate3d(var(--aos-x), var(--aos-y), 0) rotate(var(--aos-rotation, 0deg)) scale(var(--aos-scale));
}
[data-aos="fade-up"][data-aos] { --aos-y: 24px; }
[data-aos="fade-right"][data-aos] { --aos-x: -24px; }
[data-aos="fade-left"][data-aos] { --aos-x: 24px; }
[data-aos="zoom-in"][data-aos] { --aos-scale: .96; }
.about-symbol[data-aos] { --aos-rotation: -7deg; }
.about-handshake[data-aos] { --aos-rotation: 9deg; }
[data-aos][data-aos].aos-animate {
  transform: translate3d(0, 0, 0) rotate(var(--aos-rotation, 0deg)) scale(1);
}
/* Fade at the top without moving the observed box across its boundary again. */
html.aos-ready [data-aos][data-aos].aos-mirror-out {
  opacity: 0; transition-delay: 0ms !important;
  transform: translate3d(0, 0, 0) rotate(var(--aos-rotation, 0deg)) scale(1);
}
/* Content stays available if the CDN fails or a keyboard user focuses it. */
html:not(.aos-ready) [data-aos][data-aos],
html.aos-ready [data-aos][data-aos]:focus-within {
  opacity: 1 !important; pointer-events: auto !important;
  transform: rotate(var(--aos-rotation, 0deg)) !important;
  transition: none !important;
}
@media (max-width: 1023px) {
  [data-aos][data-aos] { --aos-x: 0px; --aos-y: 18px; }
  html.aos-ready [data-aos][data-aos][data-aos] { transition-duration: 550ms; transition-delay: 0ms; }
  html.aos-ready .solution-item[data-aos]:nth-child(2n).aos-animate { transition-delay: 100ms; }
}
@media (min-width: 601px) and (max-width: 1023px) {
  html.aos-ready .work-project[data-aos]:nth-child(2n).aos-animate { transition-delay: 100ms; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  html.aos-ready .why-benefits > [data-aos]:nth-child(2n).aos-animate { transition-delay: 100ms; }
}
@media (prefers-reduced-motion: reduce) {
  html [data-aos][data-aos] {
    opacity: 1 !important; pointer-events: auto !important;
    transform: rotate(var(--aos-rotation, 0deg)) !important;
    transition: none !important;
  }
}


/* Local surfaces hide the trail beneath content, leaving section gutters open.
 * The centre is opaque; only the extra 12px around each block is feathered.
 * Pseudo-elements do not change content dimensions or route anchor positions. */
:is(.hero-copy, .about-intro, .about-points, .solutions-intro-copy,
    .solution-item a, .work-intro, .work-scope-item, .work-featured, .work-project,
    .process-heading, .step-copy, .why-copy, .why-benefits li, .why-clients,
    .why-reviews-heading, .faq-intro, .contact-copy) {
  position: relative;
  isolation: isolate;
}
:is(.hero-copy, .about-intro, .about-points, .solutions-intro-copy,
    .solution-item a, .work-intro, .work-scope-item, .work-featured, .work-project,
    .process-heading, .step-copy, .why-copy, .why-benefits li, .why-clients,
    .why-reviews-heading, .faq-intro, .contact-copy)::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  pointer-events: none;
  background: var(--trail-surface, #fff);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent),
    linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent),
    linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Warm and cool tones follow the existing glows without translucent text areas. */
.solution-item a { --trail-surface: linear-gradient(155deg, #fff, var(--brand-fffaf5)); }
.solution-item:nth-child(4n + 3) a { --trail-surface: linear-gradient(155deg, #fff, #f8f9fa); }
.work-intro { --trail-surface: radial-gradient(ellipse at 20% 45%, var(--brand-fff8ef), #fff 78%); }
.work-scope-item { --trail-surface: radial-gradient(ellipse at 18% 50%, var(--brand-fff8ef), #fff 78%); }
.work-scope-item:nth-child(even) { --trail-surface: radial-gradient(ellipse at 18% 50%, #f6f8fa, #fff 78%); }
.work-featured, .work-project { --trail-surface: radial-gradient(ellipse at 12% 45%, var(--brand-fffaf5), #fff 78%); }
.why-copy { --trail-surface: linear-gradient(140deg, var(--brand-fffaf5), #fff 85%); }
.why-benefits li { --trail-surface: linear-gradient(135deg, #fff, var(--brand-fffaf5)); }
.why-clients { --trail-surface: linear-gradient(120deg, #f9fafb, #fff); }
.why-reviews-heading { --trail-surface: linear-gradient(120deg, #f9fafb, #fff); }
.faq-intro { --trail-surface: radial-gradient(ellipse at 45% 53%, var(--brand-fff4e7), var(--brand-fffaf5) 50%, #fff 80%); }
.contact-copy { --trail-surface: linear-gradient(145deg, #fff, var(--brand-fff8f1) 65%, #fff); }
.about-symbol { background-color: #fff; }
/* Keep the Process surface behind the title only, clear of the goat and arc. */
@media (min-width: 1024px) {
  .process-heading::before { right: auto; width: min(calc(100% + 24px), 650px); }
}

/* Reference-inspired contour accents: short, quiet curves around artwork.
 * These sit inside existing section bounds and never cover text or catch clicks. */
.solutions-intro::before {
  content: "";
  position: absolute;
  top: 14%; left: 44%; width: 51%; height: 45%;
  border: 1px solid transparent;
  border-top-color: #d9d4cb;
  border-right-color: var(--brand-ecd4ba);
  border-radius: 50%;
  transform: rotate(-10deg);
  -webkit-mask-image: linear-gradient(110deg, transparent, #000 25%, #000 70%, transparent 96%);
  mask-image: linear-gradient(110deg, transparent, #000 25%, #000 70%, transparent 96%);
  pointer-events: none;
  z-index: -1;
}
.work-visual::after {
  content: "";
  position: absolute;
  inset: -5% 1% 3% -1%;
  border: 1px solid transparent;
  border-top-color: #c9cdd0;
  border-left-color: var(--brand-e9c8a5);
  border-radius: 48% 54% 42% 50% / 44% 52% 46% 56%;
  transform: rotate(-9deg);
  -webkit-mask-image: linear-gradient(135deg, #000 5%, #000 46%, transparent 76%);
  mask-image: linear-gradient(135deg, #000 5%, #000 46%, transparent 76%);
  pointer-events: none;
  z-index: -1;
}
.faq-media { isolation: isolate; }
.faq-media::before {
  content: "";
  position: absolute;
  inset: 3% -3% 1%;
  border: 1px solid transparent;
  border-top-color: #d6cec3;
  border-left-color: var(--brand-e7c5a0);
  border-radius: 50%;
  transform: rotate(-14deg);
  -webkit-mask-image: linear-gradient(135deg, #000 10%, #000 55%, transparent 86%);
  mask-image: linear-gradient(135deg, #000 10%, #000 55%, transparent 86%);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 1023px) {
  .solutions-intro::before { top: auto; bottom: 14%; left: 8%; width: 85%; height: 27%; }
}
@media (max-width: 600px) {
  .work-visual::after { inset: -2% 3% 4% 0; }
  .faq-media::before { inset-inline: 0; opacity: .8; }
}

/* Goat + tiger trail. Geometry stays independent of page layout and AOS. */
/* Below the HTML/WordPress main containers (z-index: 1): content covers the prints. */
.goat-trail {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; contain: strict;
  pointer-events: none; user-select: none;
  clip-path: inset(var(--trail-header-height, 76px) 0 0);
}
.goat-trail[hidden] { display: none; }
.goat-trail-print {
  position: absolute; left: 0; top: 0; display: block;
  width: 28px; height: auto; max-width: none; opacity: 0;
  pointer-events: none; transform-origin: center; will-change: transform, opacity;
  /* No CSS transition on position: prints are planted, never sliding stickers. */
}
@media (prefers-reduced-motion: reduce) {
  .goat-trail { display: none; }
}
@media print {
  .goat-trail { display: none; }
}

.contact-fields input, .contact-fields textarea { scroll-margin-top: 130px; }
/* Avoid stretching the small supplied footer artwork. */
.contact-footer-tiger { max-width: 197px; }
.contact-footer-goat { max-width: 188px; }

/* Client feedback: six benefits, original-colour scrolling logos, and linked footer groups. */
.why-benefits li:nth-child(-n+4) { border-bottom: 1px solid var(--border-warm); }
.client-swiper .swiper-wrapper { transition-timing-function: linear !important; }
.client-logo img { filter: none; opacity: 1; }
.solution-item[id] { scroll-margin-top: clamp(100px, 9vw, 140px); }
.contact-footer-content { width: 72%; max-width: 1160px; }
.contact-footer-grid { grid-template-columns: 1.25fr .85fr 1.25fr 1.35fr; gap: 3%; padding: 0 1% 32px; }
.contact-footer-column { min-width: 0; padding-left: 12%; }
.contact-footer-details address { display: grid; gap: 13px; font-style: normal; }
.contact-footer-details address a { display: grid; gap: 3px; overflow-wrap: anywhere; line-height: 1.45; color: #e1e7e9; }
.contact-footer-details address span { font-size: 12px; font-weight: 700; color: var(--brand-ffa451); text-transform: uppercase; letter-spacing: .06em; }
.contact-footer-enquiry { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--brand-ffa451); }
@media (max-width: 800px) {
  .contact-footer-content { width: calc(100% - 40px); }
  .contact-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 145px; }
  .contact-footer-brand { grid-column: 1 / -1; }
  .contact-footer-column { margin-top: 0; padding-left: 16px; }
  .contact-footer-details { grid-column: 1 / -1; }
  .contact-footer-details address { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .contact-footer-grid { gap: 18px 10px; }
  .contact-footer-column { padding-left: 12px; }
  .contact-footer-details address { grid-template-columns: 1fr; }
  .why-benefits li:nth-child(-n+4) { border-bottom: 1px solid var(--border-warm); }
}

/* Additional About items wrap without changing the approved first row. */
@media (min-width: 1024px) {
  .about-points { row-gap: 24px; }
  .about-points li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
}

/* Optional Process introduction; absent in the default approved layout. */
.process-description { max-width: 58ch; margin-top: 18px; font-size: 16px; line-height: 1.6; }

/* Preserve the two original outline icon proportions when loaded as SVG media. */
.why-benefit-icon svg.why-icon-outline { width: 60%; height: 70%; }
.why-benefit-icon .why-icon-outline [stroke] { stroke: var(--orange); }

.client-logo > a { display:flex;align-items:center;justify-content:center;width:100%;height:100%; }

/* Rich FAQ answers retain the reference spacing for a single paragraph. */
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer ul, .faq-answer ol { padding-left: 1.5em; }
.faq-answer ul { list-style: disc; }
.faq-answer ol { list-style: decimal; }

/* Contact submission feedback; preserve the approved form layout. */
.contact-form-status[data-state="error"], .question-form-status[data-state="error"] { color: #a12622; }
.contact-form-status[data-state="success"], .question-form-status[data-state="success"] { color: #24613c; }
.contact-send:disabled, .question-submit:disabled { opacity: .65; cursor: wait; }

/* Independent footer image and native WordPress legal list. */
.contact-footer-logo img { width: 150px; max-width: 100%; height: auto; }
.contact-socials { flex-wrap: wrap; }
.footer-legal-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.footer-legal-menu li + li::before { content: "|"; margin-right: 12px; }

/* Readable standalone legal pages with the shared header and footer. */
.legal-page { padding: clamp(140px, 14vw, 190px) 24px 140px; }
.legal-article { max-width: 880px; margin-inline: auto; overflow-wrap: anywhere; }
.legal-article > h1 { margin-bottom: 40px; font-size: clamp(32px, 5vw, 52px); line-height: 1.15; }
.legal-article .entry-content { font-size: 16px; line-height: 1.8; color: var(--muted); }
.legal-article .entry-content :is(h2,h3,h4) { margin: 32px 0 12px; color: var(--ink); font-size: 22px; line-height: 1.4; }
.legal-article .entry-content p { margin-bottom: 18px; }
.legal-article .entry-content :is(ol,ul) { margin: 16px 0; padding-left: 26px; list-style: revert; }
.legal-article .entry-content li { margin-bottom: 8px; }
.legal-article .entry-content a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }