/* ==========================================================================
   SERVICE PAGES — the shared system
   Brand at the ends (illustrated hero, character close), technical in the
   middle. Every panel below is hand-written HTML/CSS, never a screenshot:
   the type stays crisp at any density and nothing is a picture of software
   we don't run. Panels are namespaced .p-* and reused across pages; each
   page picks the ones that explain its own work.
   ========================================================================== */

main.ab .tk--tall{ padding-top: clamp(2.8rem,5.5vw,4.2rem); padding-bottom: clamp(2.8rem,5.5vw,4.2rem); }
main.ab .ab-duo{ align-items: center; }

/* world.css pins .hero2__h to nowrap on desktop — right for a name, wrong
   for a sentence. Every service headline is a sentence. */
.hero2__h--long{ font-size: clamp(2.1rem,5.4vw,4.2rem) !important; max-width: 14ch !important;
  white-space: normal !important; text-wrap: balance; }

/* ---------- the ten points ---------- */
.sg-what{ list-style: none; margin: clamp(1.6rem,3vw,2.4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 clamp(2rem,5vw,4rem); }
.sg-what li{ display: grid; grid-template-columns: 2.4rem minmax(0,1fr); gap: .9rem;
  padding: clamp(.9rem,1.7vw,1.15rem) 0; border-top: 1px solid var(--line); }
.sg-what i{ font-style: normal; font-family: ui-monospace,Menlo,monospace; font-size: .68rem;
  letter-spacing: .12em; color: var(--coral); font-weight: 700; padding-top: .2rem; }
.sg-what b{ display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(.98rem,1.3vw,1.08rem); letter-spacing: -.015em; margin-bottom: .2rem; }
.sg-what span{ font-size: clamp(.86rem,1.05vw,.94rem); line-height: 1.55; color: var(--ink-2); }

/* ---------- deliverables ---------- */
.sg-del{ list-style: none; margin: clamp(1.4rem,2.6vw,2rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem clamp(1.6rem,4vw,3rem); }
.sg-del li{ display: grid; grid-template-columns: 1.1rem minmax(0,1fr); gap: .7rem; align-items: start;
  font-size: clamp(.88rem,1.05vw,.96rem); line-height: 1.5; color: var(--ink); padding: .4rem 0; }
.sg-del svg{ width: 1.1rem; height: 1.1rem; margin-top: .12rem; flex: none; }

/* ==========================================================================
   PANEL CHROME — every technical artifact sits in one of these
   ========================================================================== */
.pnl{ border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 4px rgba(18,36,58,.04), 0 24px 50px -32px rgba(18,36,58,.42); }
.pnl__bar{ display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem;
  border-bottom: 1px solid var(--line); background: var(--paper-2); }
.pnl__bar i{ width: 8px; height: 8px; border-radius: 50%; background: #D5DFEB; flex: none; }
.pnl__bar b{ margin-left: .5rem; font-family: ui-monospace,Menlo,monospace; font-weight: 500;
  font-size: .68rem; letter-spacing: .07em; color: var(--ink-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pnl__bar em{ margin-left: auto; flex: none; font-style: normal; font-family: ui-monospace,Menlo,monospace;
  font-size: .6rem; letter-spacing: .1em; color: #fff; background: var(--coral);
  border-radius: 99px; padding: .2rem .6rem; }
.pnl__bar em.q{ background: #2F6BDB; }
.pnl__body{ padding: clamp(1rem,2.2vw,1.5rem); }
.pnl-cap{ margin: .7rem .2rem 0; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.pnl-grid{ display: grid; gap: clamp(1.3rem,2.6vw,2rem); margin-top: clamp(1.6rem,3vw,2.4rem); }
.pnl-grid--2{ grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }

/* ---------- p-score: audit meters ---------- */
.p-score{ display: grid; gap: .75rem; }
.p-score__r{ display: grid; grid-template-columns: 9.5rem minmax(0,1fr) 3.4rem; gap: .8rem; align-items: center; }
.p-score__r > b{ font-family: var(--display); font-weight: 600; font-size: .84rem; }
.p-score__m{ height: 9px; border-radius: 5px; background: #EDF2F8; overflow: hidden; }
.p-score__m i{ display: block; height: 100%; width: var(--w); border-radius: 5px; background: #2F6BDB;
  transform-origin: left; animation: p-grow 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i)*.09s); }
.p-score__r--bad .p-score__m i{ background: var(--coral); }
.p-score__v{ font-family: ui-monospace,Menlo,monospace; font-size: .7rem; color: var(--ink-2); text-align: right; }
.p-score__r--bad .p-score__v{ color: var(--coral); font-weight: 700; }
@keyframes p-grow{ from{ transform: scaleX(0) } to{ transform: none } }

/* ---------- p-road: gantt ---------- */
.p-road{ display: grid; gap: .5rem; }
.p-road__rule, .p-road__row{ display: grid; grid-template-columns: 7.5rem repeat(12,minmax(0,1fr)); gap: 2px; align-items: center; }
.p-road__rule{ align-items: end; margin-bottom: .3rem; }
.p-road__rule b{ font-family: ui-monospace,Menlo,monospace; font-size: .6rem; letter-spacing: .12em; color: var(--ink-2); }
.p-road__rule span{ font-family: ui-monospace,Menlo,monospace; font-size: .58rem; color: #B7C4D3; text-align: center; }
.p-road__row i{ font-style: normal; font-family: var(--display); font-weight: 600; font-size: .82rem; }
.p-road__bar{ grid-column: var(--gc); height: 26px; border-radius: 7px; background: #E4ECF6;
  display: flex; align-items: center; padding: 0 .6rem; overflow: hidden;
  transform-origin: left; animation: p-grow .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i)*.1s); }
.p-road__bar b{ font-family: var(--display); font-weight: 600; font-size: .72rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-road__bar--on{ background: rgba(226,96,74,.16); border: 1px solid rgba(226,96,74,.4); }

/* ---------- p-kpi: metric cards ---------- */
.p-kpi{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.p-kpi > div{ border: 1px solid var(--line); border-radius: 11px; padding: .85rem .9rem; background: var(--paper-2); }
.p-kpi u{ display: block; text-decoration: none; font-family: ui-monospace,Menlo,monospace;
  font-size: .6rem; letter-spacing: .1em; color: var(--ink-2); margin-bottom: .35rem; }
.p-kpi b{ display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1rem,1.5vw,1.2rem); letter-spacing: -.02em; }
.p-kpi s{ text-decoration: none; font-size: .68rem; color: #8FA3BB; }

/* ---------- p-sheet: spreadsheet / list ---------- */
.p-sheet{ font-family: ui-monospace,Menlo,monospace; font-size: .68rem; overflow-x: auto; }
.p-sheet table{ border-collapse: collapse; width: 100%; min-width: 34rem; }
.p-sheet th{ text-align: left; font-weight: 500; color: var(--ink-2); letter-spacing: .06em;
  padding: .45rem .6rem; border-bottom: 1px solid var(--line); background: var(--paper-2); white-space: nowrap; }
.p-sheet td{ padding: .45rem .6rem; border-bottom: 1px solid #EDF2F8; color: var(--ink); white-space: nowrap; }
.p-sheet tr:nth-child(even) td{ background: #FAFCFE; }
.p-sheet .g{ color: #8FA3BB; }
.p-sheet .tag{ font-size: .58rem; letter-spacing: .06em; border-radius: 99px; padding: .12rem .5rem; }
.p-sheet .tag--ok{ background: rgba(47,107,219,.12); color: #2F6BDB; }
.p-sheet .tag--hot{ background: rgba(226,96,74,.14); color: var(--coral); }
.p-sheet .tag--wait{ background: #EDF2F8; color: var(--ink-2); }

/* ---------- p-flow: sequence / workflow ---------- */
.p-flow{ display: grid; gap: .55rem; }
.p-flow__s{ display: grid; grid-template-columns: 2.1rem minmax(0,1fr) auto; gap: .8rem; align-items: center;
  border: 1px solid var(--line); border-radius: 11px; padding: .7rem .85rem; background: #fff; }
.p-flow__i{ width: 2.1rem; height: 2.1rem; border-radius: 9px; background: var(--paper-2);
  display: grid; place-items: center; }
.p-flow__i svg{ width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p-flow__s b{ display: block; font-family: var(--display); font-weight: 600; font-size: .88rem; }
.p-flow__s span{ display: block; font-size: .76rem; color: var(--ink-2); line-height: 1.45; }
.p-flow__t{ font-family: ui-monospace,Menlo,monospace; font-size: .62rem; color: var(--ink-2);
  background: var(--paper-2); border-radius: 99px; padding: .2rem .55rem; white-space: nowrap; }
.p-flow__link{ height: 14px; margin-left: 1.05rem; border-left: 2px dashed #C4D2E0; }

/* ---------- p-board: kanban ---------- */
.p-board{ display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .6rem; }
.p-board__c{ background: var(--paper-2); border: 1px solid var(--line); border-radius: 11px; padding: .6rem .55rem; }
.p-board__h{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.p-board__h b{ font-family: var(--display); font-weight: 600; font-size: .74rem; }
.p-board__h u{ text-decoration: none; font-family: ui-monospace,Menlo,monospace; font-size: .58rem; color: var(--ink-2); }
.p-card{ background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .55rem; margin-bottom: .4rem; }
.p-card b{ display: block; font-family: var(--display); font-weight: 600; font-size: .7rem; margin-bottom: .18rem; }
.p-card span{ font-family: ui-monospace,Menlo,monospace; font-size: .58rem; color: var(--ink-2); }
.p-card--hot{ border-color: rgba(226,96,74,.45); box-shadow: 0 0 0 2px rgba(226,96,74,.1); }

/* ---------- p-serp: a search result ---------- */
.p-serp{ display: grid; gap: .9rem; }
.p-serp__r{ padding: .75rem .85rem; border-radius: 10px; border: 1px solid transparent; }
.p-serp__r--you{ border-color: rgba(226,96,74,.4); background: rgba(226,96,74,.05); }
.p-serp__u{ font-family: ui-monospace,Menlo,monospace; font-size: .62rem; color: #6B8299; margin-bottom: .18rem; }
.p-serp__t{ font-family: var(--display); font-weight: 600; font-size: .98rem; color: #2F6BDB; margin: 0 0 .22rem; }
.p-serp__d{ margin: 0; font-size: .78rem; line-height: 1.5; color: var(--ink-2); }
.p-serp__pos{ display: inline-block; font-family: ui-monospace,Menlo,monospace; font-size: .58rem;
  letter-spacing: .08em; background: var(--coral); color: #fff; border-radius: 99px; padding: .16rem .5rem; margin-bottom: .3rem; }

/* ---------- p-gauge: big score dials ---------- */
.p-gauge{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; text-align: center; }
.p-gauge figure{ margin: 0; }
.p-gauge svg{ width: 100%; max-width: 92px; height: auto; }
.p-gauge .tr{ fill: none; stroke: #EDF2F8; stroke-width: 7; }
.p-gauge .fg{ fill: none; stroke: #2F6BDB; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 226; stroke-dashoffset: calc(226 - 226 * var(--p));
  animation: p-dial 1.2s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i)*.12s); }
.p-gauge .fg--ok{ stroke: #3FA45B; }
@keyframes p-dial{ from{ stroke-dashoffset: 226 } }
.p-gauge text{ font-family: var(--display); font-weight: 600; font-size: 21px; fill: var(--ink); }
.p-gauge figcaption{ margin-top: .45rem; font-family: ui-monospace,Menlo,monospace; font-size: .6rem;
  letter-spacing: .08em; color: var(--ink-2); }

/* ---------- p-swatch: brand tokens ---------- */
.p-swatch{ display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .6rem; }
.p-swatch div{ border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.p-swatch i{ display: block; height: 54px; background: var(--c); }
.p-swatch u{ display: block; text-decoration: none; font-family: ui-monospace,Menlo,monospace;
  font-size: .58rem; color: var(--ink-2); padding: .4rem .5rem; }
.p-type{ display: grid; gap: .55rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.p-type p{ margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.p-type span{ font-family: ui-monospace,Menlo,monospace; font-size: .56rem; color: #B7C4D3; }

/* ---------- p-feed: content grid ---------- */
.p-feed{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; }
.p-feed span{ aspect-ratio: 3/4; border-radius: 9px; border: 1px solid var(--line);
  background: var(--paper-2); position: relative; overflow: hidden; }
.p-feed span::after{ content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border-left: 11px solid rgba(18,36,58,.22); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.p-feed span.on{ background: rgba(226,96,74,.1); border-color: rgba(226,96,74,.4); }
.p-feed span.on::after{ border-left-color: var(--coral); }

/* ---------- p-node: automation canvas ---------- */
.p-node{ position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.6rem .9rem; }
.p-node__n{ border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: .6rem .7rem;
  position: relative; z-index: 1; }
.p-node__n b{ display: block; font-family: var(--display); font-weight: 600; font-size: .78rem; margin-bottom: .15rem; }
.p-node__n span{ font-family: ui-monospace,Menlo,monospace; font-size: .58rem; color: var(--ink-2); }
.p-node__n--start{ border-color: rgba(47,107,219,.45); }
.p-node__n--end{ border-color: rgba(226,96,74,.5); background: rgba(226,96,74,.05); }
.p-node__n::after{ content: ""; position: absolute; right: -.9rem; top: 50%; width: .9rem; height: 2px;
  background: repeating-linear-gradient(to right,#C4D2E0 0 4px,transparent 4px 7px); }
.p-node__n:nth-child(3n)::after{ display: none; }

/* ---------- p-stat: outcome strip ---------- */
.p-stat{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: clamp(1.4rem,3vw,2.2rem); }
.p-stat div{ background: #fff; padding: clamp(1rem,2vw,1.4rem); }
.p-stat b{ display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem,1.7vw,1.35rem);
  letter-spacing: -.02em; margin-bottom: .25rem; }
.p-stat span{ font-size: .85rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- closer flight line ---------- */
#start{ position: relative; overflow: hidden; }
.go-sky{ position: absolute; inset: 0; pointer-events: none; }
.go-trail{ position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 130px; }
.go-trail path{ fill: none; stroke: #C4D2E0; stroke-width: 2.2; stroke-dasharray: 2 9; stroke-linecap: round; }
.go-ship{ position: absolute; width: 34px; height: 34px; left: 0; top: 0;
  offset-path: path('M -20 104 C 260 24, 560 114, 860 57 C 1020 31, 1120 20, 1230 11');
  offset-rotate: auto 45deg; animation: go-fly 19s linear infinite; }
@supports not (offset-path: path('M0 0 L1 1')){ .go-ship{ display: none; } }
@keyframes go-fly{ 0%{ offset-distance: 0%; opacity: 0 } 4%{ opacity: 1 } 96%{ opacity: 1 } 100%{ offset-distance: 100%; opacity: 0 } }
.go-spark{ position: absolute; width: 13px; height: 13px; fill: #CBD8E6; animation: go-tw 4.4s ease-in-out infinite; }
.go-spark--a{ left: 12%; top: 24%; } .go-spark--b{ right: 10%; top: 56%; animation-delay: -2.1s; }
@keyframes go-tw{ 0%,100%{ opacity: .25 } 50%{ opacity: .9 } }

@media (max-width: 900px){
  .pnl-grid--2{ grid-template-columns: minmax(0,1fr); }
  .sg-what, .sg-del{ grid-template-columns: minmax(0,1fr); }
  .p-kpi, .p-gauge{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .p-swatch{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .p-board{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .p-node{ grid-template-columns: minmax(0,1fr); gap: .8rem; }
  .p-node__n::after{ display: none; }
  .p-stat{ grid-template-columns: minmax(0,1fr); }
  .p-score__r{ grid-template-columns: 6.4rem minmax(0,1fr) 3rem; }
  .p-road__rule, .p-road__row{ grid-template-columns: 4.6rem repeat(12,minmax(0,1fr)); }
  .p-road__rule span:nth-child(even){ visibility: hidden; }
  .p-road__bar b{ font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce){
  .p-score__m i, .p-road__bar{ animation: none; }
  .p-gauge .fg{ animation: none; }
  .go-ship{ animation: none; offset-distance: 30%; } .go-spark{ animation: none; }
}

/* ==========================================================================
   INDUSTRIES OVERVIEW — one world, eight districts
   No cards, no boxes: every district is an alpha cutout floating straight on
   the page so the whole grid reads as one continuous place rather than eight
   tiles. The connecting road is a dashed line drawn behind the row.
   ========================================================================== */
.iw{ position: relative; }
/* The opening sub-line takes the headline's ink. Scoped to .iw so the
   body copy in the sections below keeps the muted --tk-ink-2. */
.iw .tk-p{ color: var(--tk-ink); }
.iw__world{ display: block; width: 100%; height: auto; margin: clamp(.5rem,1.5vw,1.2rem) auto 0; }

.ig{ list-style: none; margin: clamp(1.6rem,3.4vw,2.8rem) 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(1.4rem,3vw,2.6rem) clamp(1rem,2.2vw,1.8rem); }
/* the road: a dashed line threading behind both rows, so the districts read
   as stops on one route instead of separate cards */
.ig::before, .ig::after{ content: ""; position: absolute; left: 4%; right: 4%; height: 0;
  border-top: 2px dashed #D5DFEB; z-index: 0; }
.ig::before{ top: 30.5%; } .ig::after{ top: 80.5%; }
.ig > li{ position: relative; z-index: 1; text-align: center; }
.ig a{ display: block; text-decoration: none; color: var(--ink); }
.ig__art{ display: block; width: 100%; height: auto; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ig a:hover .ig__art{ transform: translateY(-6px); }
.ig h3{ font-family: var(--display); font-weight: 600; font-size: clamp(1rem,1.4vw,1.15rem);
  letter-spacing: -.02em; margin: .1rem 0 .3rem; transition: color .2s; }
.ig a:hover h3{ color: var(--coral); }
.ig p{ margin: 0 auto; font-size: clamp(.8rem,.95vw,.87rem); line-height: 1.5; color: var(--ink-2); max-width: 22ch; }
.ig__go{ display: inline-block; margin-top: .45rem; font-size: .8rem; font-weight: 600;
  font-family: var(--display); color: #B7C4D3; transition: transform .25s, color .25s; }
.ig a:hover .ig__go{ color: var(--ink); transform: translateX(3px); }

@media (max-width: 1000px){
  .ig{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ig::before{ top: 15.5%; } .ig::after{ top: 65.5%; }
}
@media (max-width: 560px){
  /* one row per industry. The <a> becomes the grid (not display:contents,
     which scattered the children across cells) and the artwork spans all
     three text rows in column one. */
  .ig{ grid-template-columns: minmax(0,1fr); gap: 1.3rem; }
  .ig::before, .ig::after{ display: none; }
  .ig > li{ text-align: left; }
  .ig a{ display: grid; grid-template-columns: 104px minmax(0,1fr);
    grid-template-rows: auto auto auto; column-gap: 1rem; align-items: center; }
  .ig__art{ grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .ig h3{ grid-column: 2; grid-row: 1; margin: 0 0 .2rem; }
  .ig p{ grid-column: 2; grid-row: 2; margin: 0; max-width: none; }
  .ig__go{ grid-column: 2; grid-row: 3; margin-top: .3rem; }
}
@media (prefers-reduced-motion: reduce){ .ig a:hover .ig__art{ transform: none; } }

/* ==========================================================================
   INDUSTRY PANELS — trade & home services
   The three artifacts a trade business recognises instantly: the local map
   result, the missed-call recovery, and the job board. All hand-built.
   ========================================================================== */

/* p-map: a local map pack result */
.p-map{ display: grid; gap: .55rem; }
.p-map__r{ display: grid; grid-template-columns: 1.6rem minmax(0,1fr) auto; gap: .7rem;
  align-items: start; padding: .7rem .8rem; border: 1px solid transparent; border-radius: 10px; }
.p-map__r--you{ border-color: rgba(226,96,74,.4); background: rgba(226,96,74,.05); }
.p-map__pin{ width: 1.6rem; height: 1.6rem; display: grid; place-items: center; }
.p-map__pin svg{ width: 1.15rem; height: 1.15rem; }
.p-map__b b{ display: block; font-family: var(--display); font-weight: 600; font-size: .92rem; margin-bottom: .18rem; }
.p-map__s{ display: flex; align-items: center; gap: .35rem; font-family: ui-monospace,Menlo,monospace;
  font-size: .62rem; color: var(--ink-2); margin-bottom: .16rem; }
.p-map__s i{ color: #E8A317; letter-spacing: -1px; font-style: normal; }
.p-map__m{ font-family: ui-monospace,Menlo,monospace; font-size: .6rem; color: #8FA3BB; }
.p-map__rank{ font-family: ui-monospace,Menlo,monospace; font-size: .58rem; letter-spacing: .08em;
  background: var(--coral); color: #fff; border-radius: 99px; padding: .16rem .5rem; white-space: nowrap; }

/* p-sms: a phone conversation */
.p-sms{ max-width: 22rem; margin: 0 auto; }
.p-sms__ph{ border: 2px solid var(--ink); border-radius: 22px; padding: .9rem .7rem; background: #fff; }
.p-sms__hd{ text-align: center; font-family: ui-monospace,Menlo,monospace; font-size: .58rem;
  color: var(--ink-2); padding-bottom: .6rem; margin-bottom: .7rem; border-bottom: 1px solid var(--line); }
.p-sms__b{ max-width: 82%; padding: .5rem .7rem; border-radius: 14px; font-size: .76rem; line-height: 1.45; margin-bottom: .45rem; }
.p-sms__b--in{ background: var(--paper-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.p-sms__b--out{ background: var(--coral); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.p-sms__t{ display: block; font-family: ui-monospace,Menlo,monospace; font-size: .54rem; opacity: .7; margin-top: .2rem; }
.p-sms__auto{ text-align: center; font-family: ui-monospace,Menlo,monospace; font-size: .55rem;
  letter-spacing: .1em; color: var(--ink-2); background: var(--paper-2); border-radius: 99px;
  padding: .2rem .6rem; display: inline-block; margin: .1rem auto .55rem; }
.p-sms__wrap{ text-align: center; }

/* p-stars: review growth */
.p-stars{ display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1.2rem; align-items: center; }
.p-stars__big{ text-align: center; }
.p-stars__big b{ display: block; font-family: var(--display); font-weight: 600; font-size: 2.6rem;
  line-height: 1; letter-spacing: -.03em; }
.p-stars__big i{ display: block; color: #E8A317; font-style: normal; letter-spacing: 1px; font-size: .95rem; margin-top: .2rem; }
.p-stars__big s{ display: block; text-decoration: none; font-family: ui-monospace,Menlo,monospace;
  font-size: .58rem; color: var(--ink-2); margin-top: .25rem; }
.p-stars__rows{ display: grid; gap: .32rem; }
.p-stars__row{ display: grid; grid-template-columns: 1.6rem minmax(0,1fr) 2.2rem; gap: .5rem; align-items: center;
  font-family: ui-monospace,Menlo,monospace; font-size: .6rem; color: var(--ink-2); }
.p-stars__bar{ height: 7px; border-radius: 4px; background: #EDF2F8; overflow: hidden; }
.p-stars__bar i{ display: block; height: 100%; width: var(--w); background: #E8A317; border-radius: 4px;
  transform-origin: left; animation: p-grow .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i)*.08s); }

/* who-we-help chips */
.p-who{ display: flex; flex-wrap: wrap; gap: .45rem; margin-top: clamp(1.2rem,2.4vw,1.8rem); }
.p-who span{ font-family: var(--display); font-weight: 600; font-size: .85rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .45rem .9rem; }
.p-who span.on{ background: rgba(226,96,74,.08); border-color: rgba(226,96,74,.35); color: var(--coral); }

@media (max-width: 900px){
  .p-stars{ grid-template-columns: minmax(0,1fr); gap: 1rem; }
}

/* ==========================================================================
   BRAND-LED INDUSTRY PAGES
   Where a service page leads with panels, an industry page leads with the
   story. These are the warm blocks: a scene with a line beside it, and a
   softer set of section labels.
   ========================================================================== */

/* a plain, warm eyebrow — no mono numbering, that reads as documentation */
.tk-eye{ font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--coral); margin: 0 0 .9rem; }

/* the story beat: one big scene, one short line under it */
.bt{ text-align: center; }
.bt__art{ display: block; width: 100%; max-width: 52rem; height: auto; margin: 0 auto; }
.bt__line{ margin: clamp(.6rem,1.5vw,1.1rem) auto 0; max-width: 34ch;
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1.05rem,1.9vw,1.45rem); line-height: 1.45; letter-spacing: -.015em; color: var(--ink); }
.bt__line b{ font-style: normal; font-weight: 600; color: var(--coral); }

/* two warm scenes side by side, each with its own caption */
.duo{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(1.6rem,4vw,3.4rem); margin-top: clamp(1.6rem,3vw,2.4rem); align-items: start; }
.duo figure{ margin: 0; text-align: center; }
.duo img{ display: block; width: 100%; height: auto; }
.duo h3{ font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem,1.7vw,1.35rem);
  letter-spacing: -.02em; margin: .4rem 0 .4rem; }
.duo p{ margin: 0 auto; max-width: 32ch; font-size: clamp(.88rem,1.05vw,.97rem);
  line-height: 1.6; color: var(--ink-2); }

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

/* the continuous flow: one unbroken visual, no panel chrome around it */
.flow{ margin-top: clamp(1.2rem,2.6vw,2rem); }
.flow__img{ display: block; width: 100%; max-width: 64rem; height: auto; margin: 0 auto; }

/* ==========================================================================
   TRADE SERVICES — its own page furniture
   Airy like the About opening: a wide panorama with the copy in open sky,
   then a small number of full-bleed beats. Nothing is stated twice; where a
   picture carries the idea, the copy stays out of its way.
   ========================================================================== */

/* the panorama hero: art sits under the copy on desktop, above it on phones */
.th{ position: relative; padding-top: clamp(1.5rem,4vw,3rem); }
.th__art{ display: block; width: 100%; height: auto; margin: clamp(-2rem,-4vw,-1rem) auto 0; }
.th__in{ position: relative; z-index: 2; max-width: 34rem; }
.th__eye{ font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--coral); margin: 0 0 .9rem; }
.th__eye a{ color: inherit; text-decoration: none; }
.th__h{ font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(2.1rem,5.2vw,4rem); line-height: .98; letter-spacing: -.04em;
  margin: 0 0 1rem; text-wrap: balance; }
.th__p{ margin: 0 0 1.6rem; font-size: clamp(1rem,1.35vw,1.2rem); line-height: 1.6; color: var(--ink); max-width: 34ch; }   /* opening sub-line: headline ink */
.th__cta{ display: flex; flex-wrap: wrap; gap: .7rem; }
/* matched to the hero2 opener CTA, so every page opens at the same scale */
.th__cta .btn{ font-size: 1.02rem; padding: 1rem 1.7rem; }
.th__ghost{ display: inline-flex; align-items: center; font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; color: var(--ink); text-decoration: none; background: #fff;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: calc(1rem - 1.5px) calc(1.7rem - 1.5px); transition: border-color .25s; }
.th__ghost:hover{ border-color: var(--ink); }

/* a beat: one scene, one line under it */
.beat{ text-align: center; }
.beat img{ display: block; width: 100%; max-width: 50rem; height: auto; margin: 0 auto; }
.beat p{ margin: clamp(.8rem,1.8vw,1.4rem) auto 0; max-width: 30ch;
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1.1rem,2vw,1.5rem); line-height: 1.4; letter-spacing: -.02em; color: var(--ink); }
.beat p b{ font-style: normal; font-weight: 600; color: var(--coral); }

/* ==========================================================================
   THE AMBITION
   One scene and one paragraph, standing where the pain-point beat and the
   four-step strip used to. Deliberately NOT a list and NOT a mechanism: the
   sections below it already own "what we do" and "what changes", so this one
   only has to say what the whole thing is FOR.
   ========================================================================== */
.why{ text-align: center; }
.why__p{ margin: clamp(.9rem,2vw,1.35rem) auto 0; max-width: 60ch;
  font-size: clamp(1.02rem,1.28vw,1.16rem); line-height: 1.75; color: var(--ink); }
.why__art{ display: block; width: 100%; max-width: 54rem; height: auto;
  margin: clamp(1.6rem,3.4vw,2.6rem) auto 0; }
.why .tk-head{ margin-inline: auto; }
.why .tk-h{ margin-inline: auto; }
@media (max-width: 700px){ .why__art{ max-width: none; margin-top: 1.3rem; } }

/* trades we serve, as a quiet run of names rather than a boxed list */
.trades{ margin: clamp(1rem,2.4vw,1.6rem) 0 0; font-size: clamp(.95rem,1.2vw,1.06rem);
  line-height: 2; color: var(--ink-2); max-width: 62ch; }
.trades b{ color: var(--ink); font-weight: 600; }

@media (max-width: 900px){
  .th{ padding-top: .5rem; }
  .th__in{ max-width: none; }
  .th__art{ margin-top: 1.2rem; }
  .th__p{ max-width: none; }
}

/* ==========================================================================
   THE CLOSE
   The section is tight: no bottom padding at all. The scene is a skinny
   full-bleed band welded to the very bottom — the ground the page ends on,
   not another block stacked underneath the words. Its ends are feathered in
   the artwork so it dissolves into the page edges at any width.
   ========================================================================== */
main.ab section#start.tk{ padding-bottom: 0; }
/* The close carries no decoration now — no flight line, no rocket, no pulsing
   beacon — so it does not need the height it was reserving for them. */
main.ab section#start.tk--close-tight{ padding-top: clamp(1.9rem,3.6vw,2.8rem); }
#start .tk__in{ padding-bottom: clamp(1.2rem,2.6vw,1.9rem); }
#start .tk-label{ margin-bottom: clamp(.5rem,1vw,.8rem); }
#start .tk-p{ margin-top: clamp(.7rem,1.4vw,1rem); }
#start .tk-close__cta{ margin-top: clamp(1.2rem,2.2vw,1.7rem); }

.close-band{ position: relative; z-index: 3; display: block; width: 100%;
  margin: 0; pointer-events: none; }
.close-band img{ display: block; width: 100%; height: auto; }


/* Phones. The close carried desktop-sized air into a much shorter viewport,
   which pushed the scene down to a sliver. Pull the whole block in and let
   the band have the room instead. */
@media (max-width: 700px){
  main.ab section#start.tk{ padding-top: clamp(1.6rem,6vw,2.4rem); }
  #start .tk-beacon{ width: 3rem; margin-bottom: .9rem; }
  #start .tk-label{ margin-bottom: .5rem; }
  #start .tk-p{ margin-top: .7rem; }
  #start .tk-close__cta{ margin-top: 1.3rem; gap: .6rem; }
  #start .tk__in{ padding-bottom: .85rem; }
}
@media (prefers-reduced-motion: reduce){ .acc{ animation: none !important; } }


/* ==========================================================================
   CONTACT — the qualifying form and the calendar it unlocks.
   Namespaced .cx-. The form comes first by design: everyone books through
   the same two steps, so every booking arrives with its answers attached.
   ========================================================================== */
.cx-grid{ display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(2rem,4.5vw,4.5rem); align-items: start; margin-top: clamp(2rem,4vw,3rem); }
@media (max-width: 920px){ .cx-grid{ grid-template-columns: minmax(0,1fr); } }

.cx-card{ background: #fff; border: 1.5px solid var(--line); border-radius: 20px;
  padding: clamp(1.4rem,2.6vw,2.2rem); box-shadow: 0 24px 60px -34px rgba(18,36,58,.35); }
.cx-step__tag{ font-family: ui-monospace,Menlo,monospace; font-size: .7rem; letter-spacing: .14em;
  color: var(--coral); margin: 0 0 .9rem; }
.cx-q{ display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.02rem,1.35vw,1.15rem); letter-spacing: -.015em; color: var(--ink);
  margin: 0 0 .55rem; }
.cx-hint{ margin: -.25rem 0 .6rem; font-size: .85rem; color: var(--ink-2); }
.cx-field{ margin-bottom: clamp(1.1rem,2vw,1.5rem); }
.cx-ta, .cx-in{ width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
  background: #FBFCFE; border: 1.5px solid var(--line); border-radius: 12px;
  padding: .8rem .95rem; transition: border-color .2s, box-shadow .2s; }
.cx-ta{ min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.cx-ta:focus, .cx-in:focus{ outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(226,96,74,.14); }
/* the budget dropdown: same skin as the inputs, plus its own chevron */
.cx-sel{ appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2346607F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; }
.cx-sel:invalid{ color: var(--ink-2); }
.cx-two{ display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px){ .cx-two{ grid-template-columns: 1fr; } }

/* choice pills: real radios, styled */
.cx-pills{ display: flex; flex-wrap: wrap; gap: .5rem; }
.cx-pills label{ position: relative; cursor: pointer; }
.cx-pills input{ position: absolute; opacity: 0; pointer-events: none; }
.cx-pills span{ display: inline-block; font-family: var(--display); font-weight: 600;
  font-size: .88rem; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 999px; padding: .55rem 1rem;
  transition: border-color .2s, background .2s, color .2s; }
.cx-pills input:checked + span{ background: var(--ink); border-color: var(--ink); color: #fff; }
.cx-pills input:focus-visible + span{ box-shadow: 0 0 0 3px rgba(226,96,74,.2); }

.cx-actions{ display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; flex-wrap: wrap; }
.cx-back{ font: inherit; font-weight: 600; color: var(--ink-2); background: none; border: 0;
  cursor: pointer; padding: .4rem .2rem; }
.cx-back:hover{ color: var(--ink); }
.cx-err{ display: none; margin-top: .9rem; font-size: .88rem; color: #B4231B; }
.cx-err.on{ display: block; }
.cx-fine{ margin: 1.1rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--ink-2); }

/* the calendar takes the card over once the answers are in */
.cx-cal{ margin-top: .4rem; }
.cx-cal iframe{ width: 100%; min-height: 720px; border: 0; border-radius: 12px; }
.cx-done{ margin: 0 0 1rem; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.cx-done b{ color: var(--ink); }

/* the right-hand column */
.cx-side h2{ font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.15rem,1.6vw,1.35rem); margin: 0 0 1rem; }
.cx-how{ list-style: none; margin: 0; padding: 0; }
.cx-how li{ display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .9rem;
  padding: .8rem 0; border-top: 1px solid var(--line); }
.cx-how li:first-child{ border-top: 0; }
.cx-how i{ font-style: normal; font-family: ui-monospace,Menlo,monospace; font-size: .78rem;
  color: var(--coral); padding-top: .2rem; }
.cx-how b{ display: block; font-family: var(--display); font-weight: 600; color: var(--ink);
  letter-spacing: -.015em; margin-bottom: .2rem; }
.cx-how span{ font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.cx-art{ display: block; width: 100%; max-width: 26rem; height: auto; margin: 1.6rem 0 0; }


/* ==========================================================================
   MID-PAGE CTA — one quiet ask in the middle of a long page, halfway
   between the opener and the closer. One lead line, one button, one
   text link. Used after the ten-points list on service and industry pages.
   ========================================================================== */
.mid-cta{ margin-top: clamp(2.2rem,4.5vw,3.4rem); display: flex; align-items: center;
  justify-content: center; gap: .55rem 1.1rem; flex-wrap: wrap; text-align: center; }
.mid-cta p{ width: 100%; margin: 0 0 .35rem; font-family: var(--display); font-weight: 600;
  letter-spacing: -.02em; font-size: clamp(1.05rem,1.5vw,1.28rem); color: var(--ink); }
.mid-cta .btn{ font-size: .98rem; padding: .9rem 1.6rem; }
/* written at (0,2,1) — the global link rule paints anchors coral and would
   otherwise double the button's emphasis */
.mid-cta a.mid-cta__link{ font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--ink-2); text-decoration: none; transition: color .2s; }
.mid-cta a.mid-cta__link:hover{ color: var(--ink); }