/* Editorial layout of the Reddest Strategy preview. */
.cookie-settings { font: inherit; color: inherit; border: 0; padding: 0; background: transparent; cursor: pointer; }
.cookie-settings:hover, .cookie-settings:focus-visible { text-decoration: underline; }
.cookie-panel { position: fixed; inset: auto clamp(12px,3vw,40px) max(12px,env(safe-area-inset-bottom)) auto; z-index: 20; width: min(390px,calc(100% - 24px)); padding: 14px 18px; border: 1px solid #837e72; border-top: 3px solid #991c2c; background: #f8f7f2; color: #201f1d; font-size: .9rem; }
.cookie-panel[hidden], .cookie-settings[hidden] { display: none; }
.cookie-panel p { margin: 0 0 8px; line-height: 1.5; }
.cookie-panel a { color: #791a27; text-decoration: underline; }
.cookie-panel div { display: flex; gap: 8px; }
.cookie-panel button { flex: 1; min-height: 42px; border: 1px solid #837e72; background: transparent; color: #201f1d; font: inherit; cursor: pointer; }
.cookie-panel button:is(:hover,:focus-visible) { background: #e9e6dd; }
:root {
  --paper: #f8f7f2;
  --ink: #201f1d;
  --red: #991c2c;
  --muted: #54524c;
  --line: #cac7bd;
  --margin: clamp(24px, 5.55vw, 96px);
  --serif: "RS Editorial", Georgia, "Noto Serif HK", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --ease: cubic-bezier(.22,.8,.22,1);
  --header-height: 76px;
}
@font-face {
  font-family: "RS Editorial";
  src: url("editorial-cjk.woff2") format("woff2");
  font-style: normal; font-weight: 400 700; font-display: swap;
}
html { scroll-padding-top: calc(var(--header-height) + 16px); }
body { overflow-wrap: break-word; }
.mast { position: sticky; inset-block-start: 0; z-index: 10; border-top: 3px solid var(--red); }
.navwrap { height: calc(var(--header-height) - 3px); gap: clamp(18px,3.4vw,54px); }
.brand img { width: clamp(132px,12vw,173px); }
.tools { gap: 19px; }
.langs { border: 0; padding: 0; gap: 1px; }
.langs a { min-width: 33px; height: 39px; }
.header-cta { display: inline-flex; gap: 15px; align-items: center; padding: 9px 15px; min-height: 42px; color: white; background: var(--red); font-size: .86rem; font-weight: 650; }
.header-cta .arrow { width: 16px; height: 16px; }
.header-cta:hover,.header-cta:focus-visible,.button.red:hover { background: #741422; }
:where(a,button,input,textarea,select,.go,.check-mark) {
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .3s var(--ease);
}
:is(a,button,input,select,textarea):focus-visible,.check-item input:focus-visible+.check-mark {
  outline: 3px solid #06588a; outline-offset: 3px;
}
.mast:focus-within { z-index: 11; }
:where(.brand,.header-cta,.button,.plain-link) .arrow { transition: transform .32s var(--ease); }
:where(.header-cta,.plain-link):is(:hover,:focus-visible) .arrow { transform: translate(2px,-2px); }
:where(.button,.header-cta,button):active:not(:disabled) { transform: translateY(1px); }
.wide-nav a,.langs a { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; }
.wide-nav a:after { bottom: 5px; }
.wide-nav a:is(:hover,:focus-visible),.back:hover,.footer a:hover,.text-control:hover,.record-source:hover,.contents a:hover { color: var(--red); }
.wide-nav a:focus-visible:after,.plain-link:focus-visible:after { transform: scaleX(1); }
.hero { overflow: visible; }
.hero-frame { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(38px,5.5vw,90px); align-items: center; padding: clamp(38px,4vw,70px) var(--margin) 32px; min-height: 0; }
.hero-copy,html:lang(en) .hero-copy { padding: 12px 0 28px; }
.eyeline { font-size: .79rem; letter-spacing: .085em; }
.eyeline>span { width: 22px; }
.hero h1,.hero-copy h1 { font-size: clamp(63px,6vw,100px); margin: 23px 0 27px; letter-spacing: -.066em; line-height: 1.19; font-weight: 550; }
.hero h1 em { color: var(--red); font-style: normal; }
html:lang(en) .hero h1 { font: 500 clamp(58px,5.8vw,98px)/.99 Georgia,serif; letter-spacing: -.067em; }
html:lang(en) .hero h1 em { font-weight: 400; max-width: 10em; }
.hero-intro { max-width: 31em; line-height: 1.9; }
.hero-ctas { margin-top: 29px; gap: 24px; }
.button { padding: 13px 19px; min-height: 48px; }
.hero-ctas .plain-link { padding-block: 9px; border-bottom: 1px solid #8b857c; }
.plate { margin: 0; min-width: 0; }
.hero-art { clip-path: none; height: clamp(385px,33vw,557px); min-height: 0; margin: 0; background: #343b3b; }
.hero-art>img { object-position: 62% 49%; filter: saturate(.75); transform: scale(1.04) translate(var(--mx),var(--my)); }
.plate-register { position: absolute; bottom: 0; left: 0; width: 23%; aspect-ratio: 1; background: var(--paper); clip-path: polygon(0 0,0 100%,100% 100%); }
.plate-register:before { content: ""; position: absolute; inset: 0; background: var(--red); clip-path: polygon(0 16%,0 100%,84% 100%); }

.dispatch { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; gap: clamp(16px,2.3vw,40px); align-items: center; border-block: 1px solid #88857c; padding: 17px 0; }
.dispatch-label { font-size: .85rem; color: var(--red); font-weight: 700; }
.dispatch time { color: var(--muted); font: .78rem/1.5 Consolas,monospace; }
.dispatch-story { border-left: 1px solid var(--line); padding-left: clamp(16px,2.3vw,40px); font-size: .96rem; }
.dispatch:is(:hover,:focus-visible) .dispatch-story { text-decoration: underline; text-underline-offset: 4px; }
.dispatch:is(:hover,:focus-visible) .arrow { transform: translate(2px,-2px); }
.services { border: 0; padding-block: clamp(80px,7.2vw,124px); }
.service-layout { display: grid; grid-template-columns: minmax(235px,.74fr) minmax(0,1.65fr); gap: clamp(40px,6.6vw,110px); align-items: start; }
.service-intro { position: sticky; top: calc(var(--header-height) + 25px); }
.section-head h2,.practice h2,.about h2,.contact h2 { font-weight: 550; font-size: clamp(36px,3.45vw,63px); line-height: 1.24; margin: 0; }
.filter-panel { margin-top: 32px; }
.filter-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 11px; margin-bottom: 14px; font-size: .79rem; font-weight: 600; }
.filter-heading output { font-size: .75rem; color: var(--muted); font-weight: 400; text-align: right; }
.filters { gap: 7px; margin-bottom: 0; }
.filters button { border-radius: 2px; min-height: 38px; padding: 6px 12px; }
.filters button[aria-pressed="true"],.case-picker button[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.directory { border-top: 2px solid var(--ink); }
.service-row { grid-template-columns: 32px 1fr 38px; gap: 20px; min-height: 92px; padding: 18px 0; }
.service-row:first-child { border-top: 0; }
.glyph { width: 32px; height: 36px; background: none; }
.row-info { grid-template-columns: 1fr 1.07fr; gap: 18px; }
.row-info h3 { font-size: clamp(20px,1.55vw,26px); line-height: 1.36; }
.row-info p { font-size: .96rem; line-height: 1.72; }
.go { width: 35px; height: 35px; border: none; }
.go .arrow { width: 17px; height: 17px; }
.service-row:is(:hover,:focus-visible) { background: #eeeae1; padding-inline: 6px; }
.service-row:is(:hover,:focus-visible) .go { background: var(--red); color: white; }
.practice,.detail-hero { background: #ece9e0; }
.practice h2 { margin-bottom: 20px; }
.case-picker button:hover:not([aria-pressed=true]) { background: #ded8cb; }
.folio { padding: 0; margin-right: 0; }
.folio:before,.folio:after { display: none; }
.evidence-sheet { border: 1px solid #c4beb2; border-top: 4px solid var(--red); box-shadow: 5px 5px 0 #d9d3c6; }
.sheet-tab { font-weight: 600; }
.about { background: #242724; }
.about h2 { margin-top: 5px; }
.about-grid>div>p.founding { color: #ffbcac; }
.credentials { border-color: #62635d; }
.contact-inner { border-top: 2px solid var(--ink); padding-top: 29px; width: calc(100% - 2 * var(--margin)); padding-inline: 0; max-width: calc(1680px - 2 * var(--margin)); }
.contact { padding-block: clamp(54px,6vw,103px); }
.contact-action .button { min-width: 152px; }
.brief,.contents,.enquiry-aside { top: calc(var(--header-height) + 18px); }
.detail-title h1,.enquiry-aside h1 { font-weight: 550; }
.check-item:hover { color: var(--red); }
.enquiry-field :is(input,textarea,select),.bulletin-tools :is(input,select) { border-color: #817d73; }
:where(.enquiry-field,.bulletin-tools) :is(input,textarea,select):hover { border-color: var(--red); }
:where(.enquiry-field,.bulletin-tools) :is(input,textarea,select):focus { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
:where(.refs,.related,.bulletin-sources) a:hover { text-decoration: underline; text-underline-offset: .25em; }
a[href^="tel:"]:hover { text-decoration: underline; }
@media(min-width:761px) and (max-width:1000px) {
  .navwrap { gap: 16px; }
  .wide-nav,.tools { gap: 10px; }
  .brand img { width: 126px; }
  .hero-frame { gap: 22px; }
  .hero h1 { font-size: 6.65vw; }
  .service-layout { gap: 30px; }
  .row-info { display: block; }
}
@media(max-width:760px) {
  :root { --margin: clamp(20px,5.4vw,38px); --header-height: 63px; }
  .brand img { width: 130px; }
  .desktop-langs { display: none; }
  .tools { gap: 9px; }
  .header-cta { min-height: 40px; padding: 7px 12px; }
  .menu-toggle { width: 41px; height: 41px; }
  .mobile-nav { position: absolute; top: 100%; left: 0; width: 100%; max-height: calc(100dvh - var(--header-height)); overflow: auto; background: var(--paper); border-bottom: 1px solid #87837a; padding-block: 9px 16px; }
  .mobile-nav>a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .mobile-nav .langs { align-self: flex-start; margin-top: 7px; }
  .mobile-nav .langs a { padding: 5px 10px; min-width: 44px; }
  .hero-frame { display: block; padding: 35px var(--margin) 20px; }
  .hero-copy,html:lang(en) .hero-copy { padding: 0; }
  .hero-copy h1,html:lang(en) .hero h1 { font-size: clamp(51px,13.2vw,76px); margin: 16px 0; }
  .hero h1 { line-height: 1.16; }
  .hero-intro { font-size: .96rem; line-height: 1.78; }
  .hero-ctas { margin-top: 18px; gap: 20px; }
  .plate { margin-top: 27px; }
  .hero-art { height: clamp(190px,52vw,302px); }
  .hero-art>img { object-position: 55% 46%; }
  .plate-register { width: 18%; }
  .dispatch { grid-template-columns: 1fr auto 18px; gap: 4px 13px; padding-block: 11px; }
  .dispatch-label { grid-column: 1; font-size: .78rem; }
  .dispatch time { grid-column: 2; font-size: .72rem; }
  .dispatch-story { grid-column: 1 / 3; padding: 0; border: 0; font-size: .87rem; }
  .dispatch .arrow { grid-column: 3; grid-row: 1 / 3; width: 17px; }
  .services { padding-block: 48px 54px; }
  .service-layout { display: block; }
  .service-intro { position: static; }
  .filter-panel { margin: 21px 0 19px; }
  .filter-heading { margin-bottom: 10px; padding-bottom: 8px; }
  .section-head h2,.practice h2,.about h2,.contact h2 { font-size: clamp(32px,8vw,47px); }
  .service-row { grid-template-columns: 24px 1fr 24px; gap: 12px; min-height: 90px; padding-block: 15px; }
  .glyph { width: 24px; }
  .go { width: 24px; height: 27px; }
  .row-info h3 { font-size: 20px; }
  .row-info p { font-size: .9rem; }
  .contact { padding-block: 46px; }
  .contact-inner { padding-top: 20px; }
  .about-grid,.contact-inner { gap: 18px; }
  .enquiry-aside,.contents,.brief { position: static; }
}
@media(prefers-reduced-motion:no-preference) {
  main { animation: enter-page .28s var(--ease) both; }
  .folio.changed .evidence-sheet:not([hidden]) { animation: menu-in .28s var(--ease); }
  .mobile-nav:not([hidden]) { animation: menu-in .23s var(--ease) both; }
  @keyframes enter-page { from { transform: translateY(3px); } to { transform: none; } }
  @keyframes menu-in { from { transform: translateY(-5px); } to { transform: none; } }
}
@media print {
  .mast,.plate,.filter-panel { display: none; }
  .service-intro { position: static; }
  .service-layout { display: block; }
}


@media(max-width:520px) {
  .credentials { grid-template-columns: 1fr; gap: 0; margin-top: 22px; padding: 0; }
  .credentials>div { display: grid; grid-template-columns: 1.1fr 1fr; align-items: baseline; gap: 12px; border-bottom: 1px solid #52554f; padding: 11px 0; }
  .credentials dd { font-size: .84rem; margin: 0; }
}

.error-page { padding-block: clamp(60px,9vw,145px); }
.error-page h1 { font: 550 clamp(44px,6.5vw,100px)/1.3 var(--serif); margin: 15px 0 9px; }
.error-page nav { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 33px; }
@media(max-width:360px) {
  .brand img { width: 116px; }
  .navwrap { gap: 9px; }
  .tools { gap: 6px; }
  .header-cta { gap: 7px; padding-inline: 9px; }
}