
:root{
  --paper:#FAF7F3;
  --paper-2:#F1EBE2;
  --ink:#232A33;
  --ink-deep:#1B2129;
  --terra:#A85C3A;
  --grey:#5C646C;
  --hair:#E3DBCF;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Montserrat",system-ui,sans-serif;
  --rail:170px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--serif);font-size:17.5px;color:var(--ink);background:var(--paper);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
img{max-width:100%;display:block}
::selection{background:var(--terra);color:var(--paper)}
a:focus-visible,button:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

.dot{display:inline-block;width:.38em;height:.38em;border-radius:50%;background:var(--terra);vertical-align:baseline;margin-left:.1em}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:60;background:rgba(250,247,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.nav-logo img{height:52px;width:auto}
.nav-links{display:flex;gap:30px;align-items:center;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em}
.nav-links a{color:var(--grey);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{color:var(--terra)!important;border:1px solid var(--terra);padding:9px 18px;border-radius:2px;transition:all .2s!important}
.nav-cta:hover{background:var(--terra);color:var(--paper)!important}
@media(max-width:820px){.nav-links a:not(.nav-cta){display:none}.nav-logo img{height:44px}}

/* ---------- HERO ---------- */
header{padding:120px 0 130px}
.kicker{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);margin-bottom:42px}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.6vw,64px);line-height:1.18;letter-spacing:-.01em;max-width:13em}
.hero-sub{font-size:clamp(18px,2vw,21px);color:var(--grey);max-width:29em;margin-top:34px;line-height:1.7}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:48px}
.btn{display:inline-flex;align-items:center;padding:14px 30px;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.05em;text-decoration:none;border-radius:2px;transition:transform .15s ease,background .2s,color .2s;border:1px solid transparent}
.btn-solid{background:var(--terra);color:var(--paper)}
.btn-solid:hover{transform:translateY(-2px);background:#94502F}
.btn-line{border-color:var(--hair);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:110px 0;scroll-margin-top:78px}
.sec-head{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--hair);padding-top:22px;margin-bottom:64px}
.sec-label{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);white-space:nowrap;display:flex;align-items:center;gap:10px}
.sec-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra);flex-shrink:0}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,40px);line-height:1.3;letter-spacing:-.005em;max-width:18em}
.offset{margin-left:var(--rail)}
@media(max-width:860px){.offset{margin-left:0}}

/* ---------- BELIEF ---------- */
.belief{background:var(--ink-deep);color:var(--paper);padding:130px 0}
.belief .sec-label{color:#9AA3AD}
.belief h2{font-size:clamp(30px,4.2vw,46px);max-width:17em;color:var(--paper)}
.belief p{color:#B9C0C8;max-width:34em;margin-top:30px;font-size:18px}
.belief em{font-style:italic;color:var(--paper)}

/* ---------- WHAT WE DO ---------- */
.svc-row{display:grid;grid-template-columns:var(--rail) 1fr;gap:24px;padding:40px 0;border-top:1px solid var(--hair)}
.svc-row:last-child{border-bottom:1px solid var(--hair)}
.svc-name{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-top:6px}
.svc-q{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,25px);line-height:1.5;max-width:24em}
.svc-d{font-size:15.5px;color:var(--grey);max-width:34em;margin-top:12px;line-height:1.75}
@media(max-width:860px){.svc-row{grid-template-columns:1fr;gap:10px}}

/* ---------- HOW WE THINK ---------- */
.think-intro{font-size:clamp(19px,2.2vw,23px);max-width:28em;line-height:1.7}
.hear{margin:64px 0 80px;border:1px solid var(--hair);background:#FFFFFF66}
.hear-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)}
.hear-row:first-child{border-top:0}
.hear-cell{padding:26px 30px}
.hear-cell:first-child{border-right:1px solid var(--hair)}
.hear-tag{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.hear-cell p{font-size:16px;line-height:1.7}
.hear-cell:first-child p{font-style:italic}
.hear-cell:last-child p{color:var(--grey);font-size:15px}
@media(max-width:760px){.hear-row{grid-template-columns:1fr}.hear-cell:first-child{border-right:0;border-bottom:1px dashed var(--hair)}}

.steps{position:relative;margin-left:14px;border-left:1px solid var(--hair);padding-left:46px}
.step{position:relative;padding:0 0 58px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-51px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--terra)}
.step:last-child::after{content:"";position:absolute;left:-47.5px;top:24px;bottom:-6px;width:2px;background:var(--paper)}
.step h3{font-family:var(--serif);font-weight:500;font-size:23px;margin-bottom:8px}
.step p{color:var(--grey);font-size:16px;max-width:32em}
.step .n{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--terra);display:block;margin-bottom:6px}

/* ---------- STORIES ---------- */
.stories{background:var(--paper-2)}
.story{padding:64px 0;border-top:1px solid var(--hair)}
.story:first-of-type{border-top:0;padding-top:0}
.story h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,30px);margin-bottom:36px;max-width:20em}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 56px}
.beat{max-width:30em}
.beat-tag{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);margin-bottom:10px}
.beat p{font-size:15.5px;color:var(--ink);line-height:1.75}
.beat.lesson p{font-style:italic}
@media(max-width:760px){.story-grid{grid-template-columns:1fr;gap:26px}}

/* ---------- INTERLUDE ---------- */
.interlude{background:var(--paper);text-align:center;padding:120px 0}
.interlude p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,3.4vw,34px);line-height:1.5;max-width:20em;margin:0 auto;color:var(--ink)}
.interlude .who{font-family:var(--sans);font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-top:26px}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}
.about-photo{position:relative;margin-top:8px}
.about-photo img{width:100%;filter:grayscale(18%)}
.about-photo::after{content:"";position:absolute;right:-13px;bottom:-13px;width:52%;height:52%;border:1px solid var(--terra);z-index:-1}
.about-body p{margin-bottom:20px;color:var(--ink);font-size:17px}
.about-body p.muted{color:var(--grey);font-size:15.5px}
.about-quote{border-left:2px solid var(--terra);padding-left:24px;margin:34px 0;font-style:italic;font-size:19px;line-height:1.7}
.cred{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--grey);border-top:1px solid var(--hair);padding-top:20px;margin-top:34px;line-height:2}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:52px}.about-photo{max-width:340px}}

/* ---------- CTA ---------- */
.cta-sec{background:var(--ink-deep);color:var(--paper);padding:130px 0}
.cta-sec h2{color:var(--paper);max-width:15em}
.cta-sec .lede{color:#B9C0C8;max-width:30em;margin-top:24px;font-size:18px}
.cta-sec .ways{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:#9AA3AD;margin-top:38px}
.cta-sec .ways a{color:var(--paper);text-decoration:none;border-bottom:1px solid #4A5460;padding-bottom:2px;transition:border-color .2s}
.cta-sec .ways a:hover{border-color:var(--terra)}

/* ---------- FOOTER ---------- */
footer{background:var(--paper);padding:74px 0 44px;font-family:var(--sans);font-size:13px;color:var(--grey)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;margin-bottom:52px}
.foot-logo img{height:96px;width:auto}
.foot-col h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.foot-col a{display:block;color:var(--grey);text-decoration:none;margin-bottom:10px;transition:color .2s;font-weight:500}
.foot-col a:hover{color:var(--terra)}
.foot-bottom{border-top:1px solid var(--hair);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11.5px;color:#9aa0a8}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- multi-page additions ---------- */
.nav-links a.active{color:var(--ink)}
.nav-links a.active{border-bottom:2px solid var(--terra);padding-bottom:4px}
.page-head{padding:96px 0 0}
.page-head .kicker{margin-bottom:30px}
.page-head h1{font-size:clamp(32px,4.6vw,52px)}
.page-head .hero-sub{margin-top:24px}
.more-link{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--terra);text-decoration:none}
.more-link:hover{text-decoration:underline}

/* ---------- bilingual ---------- */
body:not(.en) .t-en{display:none !important}
body.en .t-zh{display:none !important}
body:not(.en){font-family:"Noto Sans TC",var(--serif);font-size:16.5px;line-height:1.95}
body:not(.en) h1,body:not(.en) h2,body:not(.en) .story h3,body:not(.en) .step h3{font-family:"Noto Serif TC",serif;font-weight:700;letter-spacing:0}
body:not(.en) h1{font-size:clamp(30px,4.8vw,54px);line-height:1.45}
body:not(.en) h2{line-height:1.55}
body:not(.en) .svc-q{font-style:normal;font-family:"Noto Serif TC",serif;font-weight:600}
body:not(.en) .hero-sub,body:not(.en) .svc-d{line-height:2}
.lang{display:flex;border:1px solid var(--hair);border-radius:2px;overflow:hidden;flex-shrink:0}
.lang button{border:0;background:transparent;padding:7px 13px;cursor:pointer;color:var(--grey);font-family:var(--sans);font-size:12.5px;font-weight:700;transition:all .2s;letter-spacing:.04em}
.lang button.on{background:var(--ink);color:var(--paper)}
/* ---------- offers ---------- */
.offer{border:1px solid var(--hair);background:#FFFFFF73;padding:52px 54px;margin-top:26px}
.offer-top{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:baseline;margin-bottom:8px}
.offer h3{font-family:"Noto Serif TC",var(--serif);font-weight:700;font-size:clamp(22px,2.6vw,28px)}
body.en .offer h3{font-family:var(--serif);font-weight:500}
.offer-en{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:12px}
.offer-quote{font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--grey);margin-bottom:22px}
body:not(.en) .offer-quote{font-style:normal;font-family:"Noto Sans TC";font-size:15px}
.offer p{max-width:36em}
.offer .price{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.offer .price em{color:var(--terra);font-style:normal}
.offer-meta{display:grid;grid-template-columns:1fr 1fr;gap:30px 50px;margin-top:34px;padding-top:30px;border-top:1px solid var(--hair)}
.offer-meta h4{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.offer-meta p,.offer-meta li{font-size:14.5px;color:var(--ink);line-height:1.9}
.offer-meta ul{list-style:none}
.offer-meta li{padding-left:16px;position:relative}
.offer-meta li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--terra)}
.offer-note{font-size:13.5px;color:var(--grey);margin-top:22px;font-style:italic}
body:not(.en) .offer-note{font-style:normal}
.offer .btn{margin-top:30px}
@media(max-width:760px){.offer{padding:36px 26px}.offer-meta{grid-template-columns:1fr}}
.price-caveat{font-size:14px;color:var(--grey);max-width:34em;margin-top:44px;line-height:1.9}
.advisory{font-family:var(--sans);font-size:12px;color:#9aa0a8;margin-top:18px;letter-spacing:.03em}
/* ---------- recognition ---------- */
.recog{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin-top:56px}
.recog-cell{border-top:2px solid var(--terra);padding-top:22px}
.recog-cell .n{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--terra);display:block;margin-bottom:12px}
.recog-cell p{font-size:16px;line-height:1.95}
.recog-close{font-family:"Noto Serif TC",var(--serif);font-weight:600;font-size:19px;margin-top:52px}
body.en .recog-close{font-family:var(--serif);font-style:italic;font-weight:500}
@media(max-width:820px){.recog{grid-template-columns:1fr;gap:36px}}
/* ---------- case study ---------- */
.case-stage{border-top:1px solid var(--hair);padding:46px 0}
.case-stage:first-of-type{border-top:0;padding-top:0}
.case-tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:16px}
.case-stage p{max-width:38em;margin-bottom:14px}
.case-stage ul{list-style:none;columns:2;gap:44px;max-width:44em;margin-top:8px}
.case-stage li{padding-left:16px;position:relative;font-size:14.5px;line-height:2;break-inside:avoid}
.case-stage li::before{content:"";position:absolute;left:0;top:.78em;width:5px;height:5px;border-radius:50%;background:var(--terra)}
@media(max-width:700px){.case-stage ul{columns:1}}
.blunt{font-family:"Noto Serif TC",var(--serif);font-weight:600;font-size:clamp(20px,2.6vw,26px);line-height:1.8;border-left:2px solid var(--terra);padding-left:24px;margin:54px 0;max-width:24em}
body.en .blunt{font-family:var(--serif);font-style:italic;font-weight:500}

/* ---------- r2 refinements ---------- */
body:not(.en) .offer-quote{font-family:"Noto Serif TC",serif;font-weight:600;font-size:18px;color:var(--ink)}
body:not(.en) .recog-cell p{font-size:17px;line-height:2}
body:not(.en) h1{line-height:1.5}
body:not(.en) h2{line-height:1.6}
section{padding:100px 0}

/* ---------- mobile refinements ---------- */
@media(max-width:760px){
  .nav-in{height:60px;gap:10px}
  .nav-logo img{height:36px}
  .nav-cta{padding:6px 12px;font-size:12px}
  .lang button{padding:5px 10px;font-size:11.5px}
  header{padding:72px 0 84px}
  section{padding:72px 0}
  .belief,.cta-sec{padding:88px 0}
  #contact.cta-sec{min-height:auto !important}
  .foot-grid{flex-direction:column;align-items:flex-start;gap:38px}
  .foot-logo img{height:70px}
  .offer-top{flex-direction:column;gap:8px}
}
