/* GIGATIK V131G / About Us: centered title, arrowless buttons, home-style sticky header.
   Page-only stylesheet. Homepage, videos, forms, and server routes unchanged. */
:root {
  --ink: #203a4a;
  --ink-deep: #132d3d;
  --muted: #546a76;
  --gold: #a47845;
  --paper: #f8f6f0;
  --line: rgba(24, 53, 72, .17);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: Inter, Arial, sans-serif;
  --ui: 'Space Grotesk', Inter, sans-serif;
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 95px}
body {
  position: relative; /* Makes the art extend across full document height. */
  margin: 0;
  min-width: 280px;
  color: var(--ink);
  background-color: #f8f4ed;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Two matching wide artworks: never stretch to page height.
   Each occupies its own end of the page and softly fades into the cream canvas.
   The clean middle creates a continuous transition between chapters. */
.about-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.about-art-top, .about-art-bottom {
  position: absolute;
  width: 100%;
  left: 0;
  height: 77vw;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.about-art-top {
  top: 0;
  background-position: center top;
  background-image: url('/assets/about-two-part-top-v131e.webp');
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 94%);
}
.about-art-bottom {
  bottom: 0;
  background-position: center bottom;
  background-image:
    linear-gradient(90deg, rgba(248,244,237,.89) 0%, rgba(248,244,237,.77) 32%, rgba(248,244,237,.26) 63%, transparent 90%),
    url('/assets/about-two-part-bottom-v131e.webp');
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 67%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 6%, #000 67%, #000 100%);
}
.site-header, body > main, .site-footer {position: relative; z-index: 1}
::selection {background: rgba(181, 150, 105, .25)}
a {color: inherit; text-decoration: none}
a:focus-visible {outline: 2px solid var(--gold); outline-offset: 5px}
.container {width: min(1140px, calc(100% - 100px)); margin-inline: auto}
.skip-link {position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px 18px; background: white}
.skip-link:focus {top: 15px}
/* V131F: Home-inspired ornamental paper bar. It remains at top while scrolling
   and gently transitions into a transparent frosted overlay above the artwork. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate;
  min-height: 78px;
  border-bottom: 1px solid rgba(115,98,73,.18);
  background: rgba(248,245,238,.98);
  box-shadow: 0 5px 18px rgba(15,24,30,.045);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease,
              backdrop-filter .28s ease;
}
.site-header.is-scrolled {
  background: rgba(248,245,238,.48);
  border-bottom-color: rgba(115,98,73,.12);
  box-shadow: 0 6px 22px rgba(25,43,56,.055);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}
.site-header::before, .site-header::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 96px;
  height: 62px;
  background-position: top left;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.site-header::before {left: 0; background-image: url('/assets/gk-corner-left-final.webp')}
.site-header::after {right: 0; background-image: url('/assets/gk-corner-right-final.webp')}
.header-inner {
  width: min(1380px, calc(100% - 190px));
  min-height: 77px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 44px;
  position: relative;
  z-index: 1;
}
.brand, .footer-brand {display: inline-flex; align-items:center; flex-shrink:0}
.brand {justify-self: start}
.brand img {display:block; width:210px; max-width:25vw; height:auto}
.header-nav {display:flex; justify-self:center; align-items:center; gap:44px}
.header-nav a {
  position: relative;
  font: 700 .70rem/1 var(--ui);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #4c4a45;
  padding: 9px 0;
  transition: color .2s ease;
}
.header-nav a::after {
  content: "";
  position:absolute; bottom:2px; left:50%; width:0; height:1px;
  transform:translateX(-50%);
  background:#aa7637;
  transition:width .2s ease;
}
.header-nav a:hover::after {width:100%}
.header-nav a:hover, .footer-links a:hover, .text-action:hover {color:var(--gold)}
.home-link {
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border:1px solid rgba(186,136,70,.65);
  background:linear-gradient(180deg,#11283a,#0b1d2c);
  color:#fff8e9;
  white-space:nowrap;
  text-transform:uppercase;
  font:700 .66rem/1 var(--ui);
  letter-spacing:.10em;
  box-shadow:0 0 0 3px rgba(16,38,59,.045),0 8px 16px rgba(4,13,20,.08);
  transition:transform .2s ease, border-color .2s ease;
}
.home-link:hover {transform:translateY(-2px);border-color:#d4a25e}
/* Home navigation now uses text without a decorative arrow. */

/* Hero: editorial type and the approved long-form backdrop, no illustration or cards. */
.hero {min-height: 0; padding-top: clamp(78px, 7.5vw, 118px); padding-bottom: 66px; max-width: 1140px}
.eyebrow {display:flex; align-items:center; gap: 13px; margin:0 0 33px; color:#916e44; font:600 11px/1.6 var(--ui); letter-spacing:.185em}
.hero-eyebrow {justify-content:center; text-align:center; margin-bottom:32px}
h1, h2, h3, p {margin-top:0}
h1, h2 {font-family:var(--serif); font-weight:500; letter-spacing:-.037em; color:var(--ink-deep)}
h1 em, h2 em {font-weight: 500; color:#9d774b}
h1 {font-size:clamp(55px,6.25vw,91px); line-height:1.19; max-width:1030px; margin:0 auto 41px; text-align:center}
.hero-intro {max-width:638px; margin-left: min(20%, 215px)}
.hero-intro p {font-size:15px; line-height:1.94; color:#4d6470; margin-bottom:14px}
.hero-intro .intro-sentence {font-size:19px; line-height:1.7; color:var(--ink-deep); margin-bottom:19px}
.discover-link {display:inline-flex; align-items:center; margin-top:35px; margin-left:min(20%,215px); padding-bottom:5px; border-bottom:1px solid transparent; font:600 12px var(--ui); color:var(--ink-deep); transition:color .2s,border-color .2s}
.discover-link:hover {color:var(--gold);border-bottom-color:var(--gold)}
/* Chapter blocks share the same paper; spacing rather than colored sectional panels creates rhythm. */
.story-section {padding:52px 0 62px; scroll-margin-top:95px}
.section-layout {display:grid; grid-template-columns: 225px minmax(0,1fr); gap:70px}
.section-label {display:flex; align-items:flex-start; gap:17px; padding-top:20px; color:#677886; font:600 10px/1.6 var(--ui); letter-spacing:.14em; white-space:nowrap}
.section-index {color:#9c774a; font:600 11px/1.5 var(--ui); letter-spacing:0}
.section-body {max-width:785px}
h2 {font-size:clamp(43px,4.2vw,63px);line-height:1.26; margin:0 0 43px}
.prose {max-width:660px}
.prose p {font-size:15px;line-height:1.98;color:#536774;margin-bottom:20px}
.prose p:first-child {font-size:17px; line-height:1.82;color:#294658}
.small-intro {font-size:13px;color:#677581; margin:38px 0 27px}
.principles {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:46px;row-gap:34px;margin-top:18px}
.principle {display:flex;gap:18px;padding-top:19px;border-top:1px solid var(--line)}
.principle-no {font:600 10px var(--ui);color:#9c774a;margin-top:7px}
.principle h3 {font:500 23px/1.35 var(--serif);letter-spacing:-.02em;margin-bottom:9px}
.principle p {font-size:13px;line-height:1.83;color:#596e79;margin-bottom:0}
.section-signoff {max-width:650px;margin:33px 0 0;font:italic 16px/1.85 var(--serif);color:#7c725f}
.steps {margin-top:7px}
.step {display:grid;grid-template-columns:48px minmax(0,1fr);gap:27px;padding:26px 0 27px;border-top:1px solid var(--line)}
.step:last-child {border-bottom:1px solid var(--line)}
.step-number {font:600 11px/1.5 var(--ui);color:#9c774a;padding-top:10px}
.step h3 {font:500 26px/1.4 var(--serif); margin:0 0 6px}
.step p {font-size:14px;line-height:1.82;max-width:605px;color:#556c79;margin:0}
.services {margin-top:10px}
.service {padding:22px 0 25px;border-top:1px solid var(--line)}
.service:last-child {border-bottom:1px solid var(--line)}
.service h3 {font:500 23px/1.42 var(--serif);letter-spacing:-.015em;margin-bottom:8px}
.service p {font-size:14px;line-height:1.8;color:#536b78;max-width:650px;margin-bottom:0}
.founder-identity {padding:9px 0 26px}
.founder-label {font:600 10px/1.4 var(--ui);letter-spacing:.15em;color:#9c774a;margin-bottom:10px}
.founder-identity h3 {font:500 clamp(27px,2.8vw,36px)/1.32 var(--serif);letter-spacing:-.025em;margin-bottom:0}
.text-action {display:inline-flex; align-items:center; padding:0 0 11px;margin-top:21px;border-bottom:1px solid #a5835b;font:600 12px/1.3 var(--ui);transition:color .2s,border-color .2s}
.text-action:hover {border-bottom-color:var(--gold)}
/* One quiet conclusion with a clear path back to the existing homepage project form. */
.closing-section {padding:78px 0 108px; min-height:0}
.closing-section h2 {font-size:clamp(52px,6vw,82px);max-width:925px; margin-bottom:34px}
.closing-lead {font-size:19px;line-height:1.7;color:#284758;max-width:700px;margin-bottom:13px}
.closing-copy {font-size:15px;line-height:1.95;color:#536a77;max-width:630px;margin-bottom:0}
.primary-cta {display:inline-flex;align-items:center;justify-content:center;margin-top:37px;padding:18px 26px; min-height:58px; background:#18364b;color:#fdf9f0;font:600 13px var(--ui);border:1px solid #18364b;transition:transform .2s,background .2s}
.primary-cta:hover {transform:translateY(-2px);background:#294b60}
/* The project CTA is centered; no arrow icon. */
.site-footer {border-top:1px solid rgba(38,70,90,.14);padding:29px 0 32px}
.footer-inner {display:flex; align-items:center;justify-content:space-between;gap:25px}
.footer-brand img {display:block;width:124px;height:auto}
.footer-links {display:flex;gap:26px;font:500 12px var(--ui)}
.copyright {font:500 11px var(--ui);color:#647785;margin:0}
@media (min-width:1600px) {.hero {padding-top:125px;padding-bottom:72px}.story-section {padding-top:59px;padding-bottom:69px}}
@media (max-width:950px) {
  .about-art-top, .about-art-bottom {height: 83vw}
  .container {width:calc(100% - 72px)}
  .header-inner {width:calc(100% - 142px);gap:22px}
  .brand img {width:184px;max-width:34vw}
  .header-nav {gap:22px}
  .header-nav a {font-size:.63rem;letter-spacing:.075em}
  .site-header::before,.site-header::after {width:76px;height:50px}
  .site-header::after {right:0}
  .section-layout {grid-template-columns:150px minmax(0,1fr);gap:40px}
  .hero {min-height:0;padding-top:86px;padding-bottom:56px}
  .hero-intro,.discover-link {margin-left:10%}
  .story-section {padding:47px 0 57px}
  h2 {font-size:clamp(40px,5vw,58px)}
  .principles {column-gap:20px}
}
@media (max-width:690px) {
  html {scroll-padding-top:80px}
  .about-art-top, .about-art-bottom {
    height: 122vw;
    background-size: auto 100%;
  }
  .about-art-top {background-position: 43% top}
  .about-art-bottom {background-position: 55% bottom}
  .container {width:calc(100% - 42px)}
  .site-header {min-height:66px}
  .site-header::before,.site-header::after {width:50px;height:34px}
  .site-header::after {right:0}
  .header-inner {width:calc(100% - 32px); min-height:64px; grid-template-columns:1fr auto; gap:14px}
  .brand img {width:148px;max-width:52vw}
  .header-nav {display:none}
  .home-link {min-height:36px;padding:0 11px;font-size:.57rem;letter-spacing:.06em;gap:5px}
  /* No arrow in the Home action on small screens. */
  .hero {min-height:0;padding-top:66px;padding-bottom:45px}
  .eyebrow {font-size:10px;margin-bottom:25px}
  h1 {font-size:clamp(44px,10vw,69px);line-height:1.22;margin-bottom:30px}
  .hero-intro,.discover-link {margin-left:0}
  .hero-intro .intro-sentence {font-size:16px}
  .hero-intro p {font-size:13px;line-height:1.9}
  .discover-link {margin-top:22px}
  .section-layout {grid-template-columns:1fr;gap:22px}
  .story-section {padding:39px 0 45px}
  .section-label {padding:0;gap:0;font-size:9px}
  .section-body {max-width:none}
  h2 {font-size:clamp(38px,8vw,56px);margin-bottom:27px}
  .prose p,.prose p:first-child {font-size:13px;line-height:1.88;margin-bottom:15px}
  .prose p:first-child {font-size:14px}
  .small-intro {margin:27px 0 19px}
  .principles {grid-template-columns:1fr;row-gap:0}
  .principle {padding:18px 0;gap:20px}
  .principle h3 {font-size:22px}
  .principle p {font-size:13px}
  .section-signoff {font-size:14px;margin-top:24px}
  .step {grid-template-columns:29px minmax(0,1fr);gap:16px;padding:21px 0}
  .step h3 {font-size:24px}
  .step p {font-size:13px}
  .service {padding:21px 0}
  .service h3 {font-size:21px}
  .service p {font-size:13px}
  .founder-identity h3 {font-size:29px}
  .closing-section {padding:63px 0 85px;min-height:0}
  .closing-section h2 {font-size:clamp(42px,9.3vw,62px)}
  .closing-lead {font-size:16px}
  .closing-copy {font-size:13px}
  .primary-cta {width:100%;margin-top:32px}
  .footer-inner {flex-wrap:wrap;justify-content:space-between;gap:22px}
  .footer-links {order:3; width:100%; flex-wrap:wrap;gap:19px}
}
@media(max-width:360px) {
  .container{width:calc(100% - 32px)}
  .brand img{width:126px}
  .home-link{font-size:.54rem;padding:0 8px}
  h1{font-size:42px}
  h2{font-size:37px}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .site-header,.header-nav a,.home-link,.text-action,.discover-link,.primary-cta {transition:none}
}

/* ------------------------------------------------------------------
   V131H / About Us redesign
   Only Philosophy, Approach and Expertise are redesigned.
   Page-wide chapter indices are removed; original copy, backdrop,
   header, Who We Are, Founder and CTA are preserved.
   ------------------------------------------------------------------ */
/* V131J: section labels are plain text. No decorative rule is generated. */
.section-label {gap:0;display:block}
.philosophy-section,.approach-section,.expertise-section {padding-top:69px;padding-bottom:73px}
.philosophy-section .section-body,.approach-section .section-body,.expertise-section .section-body {min-width:0}
.philosophy-section h2,.approach-section h2,.expertise-section h2 {margin-bottom:38px}

/* Philosophy: tactile architect's-paper cards with meaning-specific diagrams. */
.principles-showcase {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:7px;
}
.principle-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:253px;
  overflow:hidden;
  padding:20px 27px 25px;
  border:1px solid rgba(145,118,82,.3);
  background:linear-gradient(148deg,rgba(255,254,251,.91),rgba(249,246,238,.83) 56%,rgba(237,232,220,.68));
  box-shadow:0 11px 31px rgba(27,45,52,.045),inset 0 1px 0 rgba(255,255,255,.78);
  transition:transform .36s cubic-bezier(.21,.68,.22,1),box-shadow .36s,border-color .36s;
}
.principle-card::before {content:"";position:absolute;top:0;left:0;height:2px;width:0;background:#a9804e;transition:width .42s ease}
.principle-card::after {content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(28,58,74,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(28,58,74,.018) 1px,transparent 1px);background-size:35px 35px;opacity:.75}
.principle-card:hover {transform:translateY(-5px);border-color:rgba(164,120,69,.62);box-shadow:0 18px 36px rgba(23,48,60,.10)}
.principle-card:hover::before {width:100%}
.principle-art {height:127px;margin-bottom:7px;position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start}
.principle-art svg {display:block;width:170px;height:127px;max-width:100%;overflow:visible}
/* V131I: deliberate diagrammatic art — readable flow and precise UI details. */
.sk-paper {fill:#fffcf6;stroke:#8da0a0;stroke-width:1.1}
.sk-header {fill:#1e4052}
.sk-panel {fill:#f6f7f2;stroke:#a5b5b4;stroke-width:1.1}
.sk-outline {fill:#fffef9;stroke:#9caeae;stroke-width:1}
.sk-softbox {fill:#f0e9dd;stroke:#d0c3b1;stroke-width:.8}
.sk-dashed {fill:rgba(191,156,109,.09);stroke:#b08a57;stroke-width:1.2;stroke-dasharray:4 3}
.sk-wire {fill:none;stroke:#829ba2;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.sk-muted {fill:none;stroke:#9babaf;stroke-width:2;stroke-linecap:round}
.sk-gold {fill:none;stroke:#ad8452;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.sk-gold-outline {fill:none;stroke:#aa824f;stroke-width:1.3}
.sk-gold-fill,.sk-node {fill:#ad8452}
.sk-text,.sk-label,.sk-small {font-family:var(--ui);fill:#375669;font-size:8px;font-weight:600;letter-spacing:.02em}
.sk-caption {font-family:var(--ui);fill:#55717d;font-size:7px;font-weight:600;letter-spacing:.04em}
.sk-header + .sk-caption {fill:#fcf7ec}
.sk-gold-label {font-family:var(--ui);font-size:8px;fill:#966a37;font-weight:700;letter-spacing:.02em}
.sk-guide {fill:none;stroke:rgba(53,92,114,.25);stroke-width:.7;stroke-dasharray:2 2}
.sk-measure {fill:none;stroke:#ad8452;stroke-width:1}
.principle-card:hover .sk-gold {stroke:#7e5a2d;stroke-width:1.95}
.principle-art svg {transition:transform .38s ease}
.principle-card:hover .principle-art svg {transform:translateY(-2px)}
.principle-copy {position:relative;z-index:1;margin-top:auto}
.principle-copy h3 {font:500 26px/1.3 var(--serif);letter-spacing:-.027em;margin:0 0 10px;color:var(--ink-deep)}
.principle-copy p {font:400 13px/1.85 var(--sans);margin:0;max-width:280px;color:#516774}

/* Approach: sticky live drawing and a scroll-driven editorial timeline. */
.approach-story {display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.91fr);align-items:start;gap:29px}
.approach-visual {
  position:sticky;
  top:110px;
  min-width:0;
  padding:19px 16px 13px;
  border:1px solid rgba(148,119,82,.34);
  background:linear-gradient(155deg,rgba(255,254,249,.95),rgba(239,234,223,.93));
  box-shadow:0 14px 39px rgba(22,45,57,.065),inset 0 1px 0 rgba(255,255,255,.75);
}
.approach-visual-head,.approach-visual-foot {display:flex;justify-content:space-between;align-items:center;gap:12px}
.approach-visual-kicker,.approach-visual-note {font:600 8px/1.4 var(--ui);letter-spacing:.12em;color:#86919a}
.approach-current-label {font:600 11px/1.3 var(--ui);color:#956d3f;letter-spacing:.045em}
.approach-diagram {display:block;width:100%;height:auto;margin:10px auto 5px;overflow:visible}
/* Four faithful product-development states — a miniature process case study. */
.board-bg {fill:#faf8f2;stroke:#aab3ad;stroke-width:1.2}
.board-guides,.board-hairline {fill:none;stroke:#d5d9d3;stroke-width:1}
.board-dot {fill:#beaa8a}
.board-meta,.board-overline,.board-small,.board-ui,.board-strong,.board-toplight,.board-number,.board-pill-text,.board-highlight-text {font-family:var(--ui)}
.board-meta {font-size:9px;font-weight:600;letter-spacing:.08em;fill:#667a80}
.board-overline {font-size:11px;font-weight:700;letter-spacing:.075em;fill:#8d673d}
.board-card,.board-app,.board-qa {fill:#fffefd;stroke:#c9d0ca;stroke-width:1.1}
.board-strong {font-size:13px;font-weight:700;fill:#2c4b5b}
.board-small {font-size:10px;font-weight:500;fill:#7b8e92}
.board-ui {font-size:11px;font-weight:600;fill:#46606c}
.board-tag,.board-wirefill {fill:#f4f6f2;stroke:#bdc9c6;stroke-width:1}
.board-connector,.board-note-line,.board-wireline {fill:none;stroke:#a3b3ae;stroke-width:1.6;stroke-linecap:round}
.board-connector {stroke:#aa8552;stroke-dasharray:3 3}
.board-alert {fill:#b58c54}.board-alert-text {font:700 14px var(--ui);fill:#fff}
.board-bullet {fill:#b18a56}
.board-highlight,.board-selected {fill:#eee6d6}
.board-highlight-text {font-size:9px;letter-spacing:.055em;font-weight:700;fill:#8f6b3e}
.board-appbar {fill:#28495a}.board-toplight {font-size:10px;font-weight:600;fill:#fffdf7}
.board-wirebox {fill:none;stroke:#a2b4b5;stroke-width:1}
.board-app.solid {fill:#fcfdfb}.board-live,.board-chart {fill:none;stroke:#a67b45;stroke-width:2}
.board-live {fill:#a98858;stroke:none}
.board-sidebar {fill:#f0f3f0}
.board-metric {fill:#fff;stroke:#c9d6d3;stroke-width:1}
.board-number {font-size:22px;font-weight:700;fill:#24485b}
.board-pill {fill:#ede5d4}.board-pill-text {font-size:9px;fill:#896437;font-weight:700}
.board-qa {fill:#f7f9f5}.board-tick {fill:none;stroke:#a07c4b;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.diagram-state {opacity:0;transform:translateY(7px);transition:opacity .42s ease,transform .56s ease;pointer-events:none}
.approach-section[data-active-stage="discover"] .diagram-discover,
.approach-section[data-active-stage="design"] .diagram-design,
.approach-section[data-active-stage="develop"] .diagram-develop,
.approach-section[data-active-stage="refine"] .diagram-refine {opacity:1;transform:translateY(0)}
.approach-track {display:block;width:43%;height:2px;background:rgba(38,65,77,.12);overflow:hidden}
.approach-track span {display:block;width:25%;height:100%;background:#ac8250;transition:width .5s ease}
.approach-section[data-active-stage="design"] .approach-track span {width:50%}
.approach-section[data-active-stage="develop"] .approach-track span {width:75%}
.approach-section[data-active-stage="refine"] .approach-track span {width:100%}
.approach-stages {position:relative;padding-left:22px}
.approach-stages::before {content:"";position:absolute;left:4px;top:38px;bottom:110px;width:1px;background:linear-gradient(#c5a57a,#b9c4c6 50%,#c5a57a)}
.approach-stage {position:relative;min-height:216px;padding:23px 3px 33px 17px;border-top:1px solid rgba(43,71,85,.15);transition:opacity .35s,border-color .35s,background .35s}
.approach-stage:last-child {min-height:184px;border-bottom:1px solid rgba(43,71,85,.15)}
.approach-stage::before {content:"";position:absolute;left:-22px;top:36px;width:9px;height:9px;border:1px solid #b5a185;border-radius:50%;background:#f7f3eb;transition:background .3s,box-shadow .3s}
.approach-stage.is-active::before {background:#ac8352;box-shadow:0 0 0 5px rgba(176,134,83,.13)}
.approach-stage.is-active {border-top-color:rgba(167,125,73,.65);background:linear-gradient(90deg,rgba(185,151,109,.06),transparent 78%)}
.approach-stage-header {display:flex;align-items:center;gap:13px;margin-bottom:12px}
.stage-symbol {display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border:1px solid rgba(88,108,118,.26);border-radius:50%;color:#6b7b81;transition:color .35s,border-color .35s}
.stage-symbol svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.is-active .stage-symbol {color:#a47b49;border-color:rgba(167,125,73,.55)}
.approach-stage h3 {font:500 26px/1.3 var(--serif);letter-spacing:-.025em;margin:0;color:var(--ink-deep)}
.approach-stage p {font:400 13px/1.91 var(--sans);margin:0;color:#536b78}

/* Expertise: desktop selection + matching drawn evidence; mobile accordion. */
.expertise-showcase {position:relative;min-height:550px;padding:5px calc(55% + 23px) 14px 0}
.expertise-entry {position:static;border-top:1px solid var(--line)}
.expertise-entry:last-child {border-bottom:1px solid var(--line)}
.expertise-entry h3 {font:inherit;margin:0}
.expertise-trigger {appearance:none;-webkit-appearance:none;width:100%;min-height:118px;display:flex;align-items:center;justify-content:space-between;gap:15px;text-align:left;border:0;padding:19px 8px 19px 14px;background:transparent;color:#496474;font:500 21px/1.34 var(--serif);letter-spacing:-.02em;cursor:pointer;transition:color .25s,background .25s}
.expertise-trigger:hover,.expertise-entry.is-active .expertise-trigger {color:#1c394b;background:linear-gradient(90deg,rgba(169,125,70,.08),transparent 95%)}
.expertise-trigger:focus-visible {outline:2px solid #ac8352;outline-offset:-3px}
.expertise-trigger-mark {position:relative;flex:0 0 20px;width:20px;height:20px;border:1px solid rgba(147,115,74,.43);border-radius:50%;transition:background .28s,border-color .28s}
.expertise-trigger-mark::before,.expertise-trigger-mark::after {content:"";position:absolute;top:9px;left:5px;width:8px;height:1px;background:#9d794a;transition:transform .28s}
.expertise-trigger-mark::after {transform:rotate(90deg)}
.expertise-entry.is-active .expertise-trigger-mark {background:#a7804e;border-color:#a7804e}
.expertise-entry.is-active .expertise-trigger-mark::before,.expertise-entry.is-active .expertise-trigger-mark::after {background:#fff8eb}
.expertise-entry.is-active .expertise-trigger-mark::after {transform:rotate(0)}
.expertise-panel {
  position:absolute;
  right:0;
  top:0;
  width:55%;
  min-height:529px;
  padding:17px 20px 30px;
  border:1px solid rgba(141,116,83,.32);
  background:linear-gradient(155deg,rgba(255,254,251,.96),rgba(241,237,228,.95));
  box-shadow:0 16px 39px rgba(26,51,60,.058),inset 0 1px 0 #fff;
  animation:expertise-appear .5s cubic-bezier(.18,.7,.24,1) both;
}
.expertise-panel[hidden] {display:none!important}
.expertise-illustration {width:100%;margin:7px auto 23px;background:transparent}
.expertise-illustration svg {width:100%;height:auto;display:block;max-height:272px}
/* Service-specific interface studies: real screen structures and legible annotations. */
.ui-window,.ui-card {fill:#fffefa;stroke:#b7c7c7;stroke-width:1.3}
.ui-topbar {fill:#254657}.ui-toptext {fill:#f8f4eb;font:600 10px var(--ui);letter-spacing:.08em}
.ui-online {fill:#c3a16a}.ui-sidebar {fill:#f0f3f0}
.ui-active,.ui-tinted {fill:#eee5d5}.ui-subcard {fill:#f7f5ef;stroke:#deded5;stroke-width:1}
.ui-item {fill:#355367;font:600 11.5px var(--ui)}
.ui-muted {fill:#70858b;font:500 10px var(--ui)}
.ui-heading {fill:#26495a;font:700 14px var(--ui)}
.ui-caption {fill:#829599;font:500 10px var(--ui)}
.ui-tiny,.ui-overline {fill:#8b714e;font:700 9px var(--ui);letter-spacing:.085em}
.ui-tiny {font-size:8.5px}
.ui-metric {fill:#254658;font:700 23px var(--ui)}
.ui-divide {fill:none;stroke:#dce1dc;stroke-width:1}
.ui-pill {fill:#eee6d7}.ui-pilltext {fill:#836239;font:600 8px var(--ui)}
.ui-track {fill:#e4e9e4}.ui-progress {fill:#ab895a}
.ui-outline {fill:#eee6d7;stroke:#c1ac8a;stroke-width:1}
.ui-icon {fill:none;stroke:#8e6e41;stroke-width:1.5;stroke-linecap:round}
.ui-flow {fill:none;stroke:#a7885e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-confirm {fill:#f1f5ef;stroke:#b7c9bc;stroke-width:1.1}
.ui-success {fill:#517563}.ui-white {fill:none;stroke:white;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.expertise-detail-label {font:600 9px/1.3 var(--ui);letter-spacing:.135em;color:#957246}
.expertise-description {padding:0 10px}
.expertise-description h4 {font:500 clamp(21px,2.4vw,29px)/1.35 var(--serif);letter-spacing:-.028em;color:var(--ink-deep);margin:10px 0 12px}
.expertise-description p {font:400 13px/1.9 var(--sans);color:#526977;margin:0}
@keyframes expertise-appear {from {opacity:0;transform:translateY(10px)}to {opacity:1;transform:translateY(0)}}

/* Scroll reveal only enabled by JS, so content stays visible when JS is off. */
.motion-ready .reveal:not(.is-visible) {opacity:0;transform:translateY(20px)}
.reveal {transition:opacity .65s ease,transform .65s cubic-bezier(.22,.65,.2,1)}
.reveal.is-visible {opacity:1;transform:translateY(0)}
@media (max-width:950px) {
  .philosophy-section,.approach-section,.expertise-section {padding-top:56px;padding-bottom:61px}
  .principle-card {padding:17px 19px 22px;min-height:247px}
  .approach-story {grid-template-columns:minmax(0,1fr);gap:20px}
  .approach-visual {top:88px;max-width:100%;padding:13px 18px 12px;z-index:2}
  .approach-diagram {height:210px;width:100%}
  .approach-stages {padding-left:24px}
  .approach-stage {min-height:177px;padding-top:22px;padding-bottom:23px}
  .approach-stage:last-child {min-height:151px}
  .approach-stages::before {bottom:80px}
  .expertise-showcase {padding-right:0;min-height:0}
  .expertise-trigger {min-height:79px;padding-block:15px;font-size:20px}
  .expertise-panel {position:relative;right:auto;top:auto;width:100%;min-height:0;margin:0 0 16px;padding:13px 19px 24px}
  .expertise-illustration {max-width:510px;margin:0 auto 8px}
  .expertise-illustration svg {max-height:225px}
  .expertise-description h4 {font-size:26px}
}
@media (max-width:690px) {
  .philosophy-section,.approach-section,.expertise-section {padding-top:41px;padding-bottom:50px}
  .philosophy-section h2,.approach-section h2,.expertise-section h2 {margin-bottom:29px}
    .principles-showcase {grid-template-columns:1fr;gap:13px}
  .principle-card {min-height:0;display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:20px 18px;align-items:center}
  .principle-art {height:94px;margin:0}
  .principle-art svg {width:90px;height:94px}
  .principle-copy h3 {font-size:23px;margin-bottom:7px}
  .principle-copy p {font-size:12px;line-height:1.77}
  .approach-story {gap:12px}
  .approach-visual {top:76px;padding:12px 12px 9px}
  .approach-visual-kicker,.approach-visual-note {font-size:7px}
  .approach-current-label {font-size:10px}
  .approach-diagram {height:165px;margin:3px auto}
  .approach-stage {min-height:195px;padding:20px 4px 23px 13px}
  .approach-stage:last-child {min-height:162px}
  .approach-stage h3 {font-size:24px}
  .approach-stage p {font-size:13px;line-height:1.84}
  .approach-stages {padding-left:19px}
  .approach-stages::before {left:4px;top:30px;bottom:75px}
  .approach-stage::before {left:-19px;top:30px}
  .expertise-trigger {min-height:77px;padding:14px 6px 14px 12px;font-size:20px}
  .expertise-panel {padding:8px 12px 22px}
  .expertise-illustration svg {max-height:195px}
  .expertise-description {padding:0 7px}
  .expertise-description h4 {font-size:23px}
  .expertise-description p {font-size:12.5px}
}
@media (max-width:360px) {
  .principle-card {grid-template-columns:76px minmax(0,1fr);gap:9px;padding:16px 12px}
  .principle-art svg {width:76px}
  .principle-copy h3 {font-size:21px}
  .approach-diagram {height:145px}
  .approach-stage {min-height:205px}
  .expertise-trigger {font-size:18px}
}
@media (hover:none) {
  .principle-card:hover {transform:none}
}
@media (prefers-reduced-motion:reduce) {
  .principle-card,.principle-card::before,.principle-art svg,.sk-gold,.diagram-state,.approach-track span,.approach-stage,.approach-stage::before,.stage-symbol,.expertise-trigger,.expertise-trigger-mark,.expertise-trigger-mark::after,.reveal {transition:none!important}
  .expertise-panel {animation:none}
  .motion-ready .reveal:not(.is-visible) {opacity:1;transform:none}
}

/* With JavaScript unavailable, each full service description remains visible. */
body:not(.has-js) .expertise-showcase {min-height:0;padding-right:0}
body:not(.has-js) .expertise-panel {position:relative;right:auto;top:auto;width:100%;min-height:0;margin:0 0 18px}
body:not(.has-js) .expertise-trigger {cursor:default}