/* agency-services: the black field ends against a single curved ledger. */
.page-marketing main{background:#141613;color:#f6f5ef;padding-bottom:0}
.page-marketing main>.wrap{width:100%;max-width:none}
.page-marketing main>.wrap>:not(.ledger){width:min(88%,1180px);margin-inline:auto}
.page-marketing .mkt-head{display:block;padding:clamp(50px,8vw,125px) 0}
.page-marketing .mkt-head h1{font:800 clamp(40px,6.5vw,102px)/1.04 Arial,"Microsoft JhengHei",sans-serif;letter-spacing:-.055em;max-width:16ch;text-wrap:balance;margin:24px 0}
.page-marketing .intro{max-width:58ch;color:#d4d7cc}
.page-marketing .eyebrow,.page-marketing .num{color:#def2a6}
.ledger{background:#fbfaf5;color:#191c18;border-radius:clamp(26px,6vw,82px) clamp(26px,6vw,82px) 0 0;padding:clamp(34px,6vw,88px) 6%}
.ledger .example-label{border:0;font:700 clamp(24px,4vw,64px)/1.1 Arial,sans-serif;color:inherit;text-align:center;margin-bottom:35px}
.ledger .adspread{display:block;max-width:1000px;margin:auto}
.ledger .ad{background:none;color:inherit;border:0;border-top:1px solid #9fa397;display:grid;grid-template-columns:minmax(60px,20%) 1fr;gap:0 5%;padding:24px 0;align-items:center}
.ledger .ad>b{grid-column:2}.ledger .adletter{position:static;grid-row:1/4;grid-column:1;color:#262d23;font:900 clamp(70px,11vw,160px)/1 Arial}
.ledger .ad h2,.ledger .ad p{grid-column:2;margin:6px 0}.page-marketing .journey-switch button{color:white}.page-marketing .journey-switch button[aria-pressed=true],.page-marketing .nextlinks .action{background:#def2a6;color:#151812}.page-marketing .textlink,.page-marketing .nextlinks span{color:inherit}.page-marketing .nextlinks{padding-bottom:55px}
/* codeveil: rules, hatch bands and a live instrument in the hero. */
.page-ai{background:#efede8}.page-ai main>.wrap{border-inline:1px solid #2c3029}
.page-ai .ai-head{display:block;text-align:center;border-top:14px solid transparent;border-image:repeating-linear-gradient(-45deg,#272922 0 1px,transparent 1px 6px) 14;padding:40px 5% 28px}
.page-ai .ai-head .eyebrow{justify-content:center}.page-ai .ai-head h1{font:500 clamp(30px,3.7vw,62px)/1.09 Arial,"Microsoft JhengHei",sans-serif;max-width:26ch;margin:18px auto;letter-spacing:-.045em}
.page-ai .ai-head .intro{font-size:16px;max-width:72ch;margin:auto}.console{width:min(90%,920px);margin:10px auto 40px;border:1px solid #242720;box-shadow:5px 5px 0 #c7c6ba;background:#fafaf6}
.console header{display:flex;justify-content:space-between;background:#222820;color:#eff1e9;padding:10px 16px;font:12px Consolas,monospace}
.console-body{display:grid;grid-template-columns:32% 1fr;min-height:220px}.console .step-index{display:flex;flex-direction:column;margin:0;border:0;background:#e2e3da}.console .step-index a{padding:14px;border:0;border-bottom:1px solid #b8bdaf;display:block}.console .step-index a[aria-current]{background:#ccd9ad;box-shadow:inset 4px 0 #353f29}.readout{padding:clamp(16px,3vw,38px);align-self:center}.readout small{font:13px Consolas,monospace}.readout h2{line-height:1.15}.readout p{margin-bottom:0;line-height:1.5}.page-ai .workflow,.page-ai .other-cases{padding:0 4%}.page-ai .workflow{border-top:12px solid transparent;border-image:repeating-linear-gradient(-45deg,#272922 0 1px,transparent 1px 6px) 12}
/* arceage: centred mixed-type invitation with an unboxed correspondence field. */
.page-contact{background:#fff;color:#121512}.page-contact .contact{display:block;max-width:760px;text-align:center;padding:clamp(44px,6vw,86px) 0}.contact .eyebrow{justify-content:center}.page-contact .contact h1{font:500 clamp(30px,4.3vw,60px)/1.18 Arial,"Microsoft JhengHei",sans-serif;letter-spacing:-.035em;text-wrap:balance;color:var(--control-ink);margin:22px auto}.contact .intro{margin:auto}.contact .letter{max-width:600px;margin:40px auto 0;background:none;box-shadow:none;border:0;border-top:1px solid #222;padding:20px 0;text-align:left}.letter small,.letter h2{display:inline;margin-right:6px}.contact .letter h2{font-size:22px}.letter .address{float:right}.contact .letter textarea{background:white;border:0;border-block:1px solid #8b928a;padding:14px 0;min-height:98px}.contact .letter .action{display:flex;justify-content:space-between;background:#181b18;color:white;padding:14px 20px}.contact .edit-hint{text-align:center}
/* Home: keep the approved A/B composition; turn diagnostics into an issue index. */
.page-home .diagnostic{display:block;padding-block:clamp(40px,6vw,90px);counter-reset:q}.page-home .diagnostic details{counter-increment:q}.page-home .diagnostic summary{justify-content:flex-start;padding:20px 0}.page-home .diagnostic summary::before{content:counter(q,decimal-leading-zero);font:700 clamp(28px,4vw,58px)/1 Arial;color:#526347}.page-home .diagnostic summary span{margin-left:auto}.page-home .about{background:#171b16}
@media(max-width:700px){.console-body{display:block}.console .step-index{flex-direction:row}.console .step-index a{min-width:0;padding:8px;font-size:12px}.readout{min-height:155px}.page-ai .ai-head{padding:26px 4% 14px}.contact .letter .address{float:none;display:block;width:fit-content}.ledger .ad p{grid-column:1/-1}.page-marketing .mkt-head{padding-block:38px}}
@media(prefers-reduced-motion:no-preference){.ledger .ad,.readout,.page-contact .letter{animation:arrive .45s ease-out both}@keyframes arrive{from{opacity:.65;transform:translateY(9px)}to{opacity:1;transform:none}}}

/* Shared controls use the paper, ink and seal colours of the opening print. */
body {
  --control-ink: #282521;
  --control-paper: #f7f3ea;
  --control-seal: #88432e;
}
body :is(.hero-type, .nextlinks, .trial, .letter) .action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 44px;
  max-width: 100%;
  padding: 9px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--control-ink);
  color: var(--control-paper);
  line-height: 1.35;
}
body :is(.hero-type, .nextlinks, .trial, .letter) .action span {color: inherit}
body :is(.hero-type, .nextlinks, .trial, .letter) .action:hover {
  background: var(--control-seal);
  color: white;
  text-decoration: none;
}
.page-marketing main {background: var(--control-ink)}
.page-marketing :is(.eyebrow, .num, .route li + li::before) {color: #e7b49c}
.page-marketing .intro {color: #e5ded3}
.page-marketing .ledger {background: var(--control-paper)}
.page-marketing .ledger .adletter {color: var(--control-ink)}
.page-marketing .nextlinks .action, .page-ai .trial .action {
  background: var(--control-paper);
  color: var(--control-ink);
}
.page-marketing .journey-switch {flex-wrap: wrap; gap: 8px}
.page-marketing .journey-switch button {
  border-radius: 999px;
  min-height: 44px;
  border-color: #a1988e;
}
.page-marketing .journey-switch button[aria-pressed=true] {
  color: var(--control-ink);
  background: var(--control-paper);
}
.page-ai {background: var(--control-paper)}
.console header, .page-ai .trial {background: var(--control-ink)}
.console {background: #fffaf2; box-shadow: 4px 4px 0 #d6cfc2}
.console .step-index {background: #e9e3d8; padding: 6px; gap: 4px}
.console .step-index a {border: 1px solid transparent; border-radius: 12px}
.console .step-index a[aria-current] {
  background: #fff9ee;
  border-color: var(--control-seal);
  box-shadow: none;
}
.page-ai .flow > div {background: #e8e1d5}
.page-ai .flow > div + div {background: #f2ded0}
.page-contact {background: var(--control-paper)}
.contact .letter textarea {background: #fffaf2; padding-inline: 12px}
.page-marketing main :focus-visible, .page-ai .trial :focus-visible {
  outline: 3px solid #eeb298;
  outline-offset: 3px;
}
@media (max-width: 660px) {
  .mast .language, .phone-nav summary, .phone-nav nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .phone-nav summary {width: 44px; justify-content: center}
  .phone-nav nav {top: 100%; border-radius: 12px}
}

.journey-panel .case-label {color:#e7b49c;font-size:.85em}
.journey-panel h3 {margin:0 0 .45em;font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.35;text-wrap:balance}

/* Give each case marker a fixed box aligned with the first title line. */
.other-cases .step {
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}
.case-arrow {
  display: block;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  color: var(--control-seal);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.other-cases .step h3 {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.35;
  text-wrap: pretty;
}
@media (max-width: 700px) {
  .other-cases .step {column-gap: 12px;}
  .case-arrow {margin-top: 3px;}
}

/* Service scope follows the diagnosis with readable, expandable deliverables. */
.delivery {
  padding-block: clamp(32px, 5vw, 72px);
}
.delivery > header {
  max-width: 760px;
  margin-bottom: 28px;
}
.delivery h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.2;
  letter-spacing: -.035em;
  margin: 16px 0;
}
.delivery-item {
  border-top: 1px solid #9c9489;
}
.delivery-item:last-child {
  border-bottom: 1px solid #9c9489;
}
.delivery-item summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  gap: 20px;
  padding: 24px 0;
  align-items: start;
  list-style: none;
}
.delivery-item summary::-webkit-details-marker {display: none;}
.delivery-number {
  color: #e7b49c;
  font: 18px/1.5 Consolas, monospace;
}
.delivery-item small {
  display: block;
  color: #e7b49c;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
}
.delivery-item strong {
  display: block;
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1.25;
  margin: 6px 0;
}
.delivery-question {
  display: block;
  font-size: 16px;
  color: #e5ded3;
}
.delivery-toggle::before {content: '+'; font: 25px/1 monospace;}
.delivery-item[open] .delivery-toggle::before {content: '−';}
.delivery-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 0 44px 32px 62px;
}
.delivery-body h4 {
  color: #e7b49c;
  font-size: 14px;
  margin: 0 0 8px;
}
.delivery-body p {margin: 0; max-width: 55ch;}
.page-marketing .service-jump {
  border: 1px solid #a1988e;
  border-radius: 999px;
  min-height: 44px;
  padding: 9px 20px;
  align-items: center;
  margin-top: 24px;
  color: #f7f3ea;
}
.page-marketing .service-jump span {color: inherit;}
.page-marketing .service-jump:hover {background: #f7f3ea; color: #282521;}
@media (max-width: 700px) {
  .delivery-item summary {grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 10px;}
  .delivery-body {grid-template-columns: 1fr; gap: 20px; padding: 0 0 25px 38px;}
  .delivery-item strong {font-size: 23px;}
}

.service-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.service-index a, .copy-draft {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  font: inherit;
  font-size: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.service-index a:hover {background: #f7f3ea; color: #282521;}
.delivery-item {scroll-margin-top: 24px;}
.service-enquiry {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  border-bottom: 1px solid #c6bcaf;
  margin: 0 0 28px 62px;
}
.work-sample {padding-bottom: 64px;}
.work-sample > header {max-width: 760px;}
.work-sample h2, .demo-intro h2 {font-size: clamp(27px, 3vw, 42px); line-height: 1.2;}
.work-sample small, .work-sample h4 {color: #e7b49c;}
.sample-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}
.sample-grid article {border-top: 1px solid #c6bcaf;}
.sample-grid h3 {font-size: 24px;}
.sample-grid h4 {font-size: 13px; margin: 20px 0 6px;}
.sample-grid p {font-size: 16px; margin: 0;}
.demo-intro {padding: 12px 5% 0; text-align: center;}
.demo-intro p {font-size: 14px;}
.readout table {width: 100%; border-collapse: collapse; font-size: 14px;}
.readout caption {text-align: left; font-size: 12px; margin-bottom: 8px;}
.readout th, .readout td {border-top: 1px solid #c7bcae; padding: 8px 6px; text-align: left; vertical-align: top;}
.readout th {width: 35%;}
.readout h2 {font-size: clamp(22px, 2.2vw, 32px);}
.readout p {font-size: 15px;}
.copy-draft {margin-top: 12px;}
.copy-draft:hover {background: #e7e1d6;}
@media (max-width: 700px) {
  .sample-grid {grid-template-columns: 1fr;}
  .sample-grid article {padding-bottom: 18px;}
  .service-enquiry {margin-left: 38px; margin-right: 12px;}
  .readout {padding: 18px 12px;}
}

.brand { height: auto; }