/* KEEHOY multi-page site. Original styles; external references documented in research/. */
:root { --ink:#173e34; --forest:#153e35; --paper:#fafbf7; --soft:#eef1e7; --lime:#d9ef9c; --muted:#5e6d63; --line:#d9dfd3; font-family:"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; line-height:1.8; }
html { scroll-behavior:smooth; }
a { color:inherit; text-decoration:none; }
button,select,textarea { font:inherit; }
button,summary { cursor:pointer; }
button { border:0; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.4; letter-spacing:-.045em; }
p { color:var(--muted); }
img { max-width:100%; display:block; }
::selection { background:var(--lime); color:var(--ink); }
:focus-visible { outline:3px solid #87a650; outline-offset:5px; }
.container { width:min(1280px,calc(100% - 112px)); margin-inline:auto; }
.topbar { background:var(--forest); color:#e1ead7; font-size:10px; letter-spacing:.07em; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; min-height:34px; gap:20px; }
.topbar a { letter-spacing:0; font-size:11px; }
.site-header { background:var(--paper); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; min-height:91px; }
.wordmark { display:inline-flex; align-items:center; font-size:34px; font-weight:750; letter-spacing:-1.8px; line-height:1; }
.wordmark .brand-logo { width:190px; height:36px; object-fit:contain; }
.wordmark > span { display:inline-flex; width:32px; height:35px; justify-content:center; align-items:center; background:var(--forest); color:var(--paper); border-radius:2px 11px 2px 2px; margin-right:9px; font-size:33px; }
.wordmark > b { color:#7b9852; font-size:29px; }
nav { display:flex; align-items:center; gap:25px; font-size:13px; font-weight:600; }
nav > a { padding-block:13px; position:relative; white-space:nowrap; }
nav > a:not(.nav-cta)::after { content:""; position:absolute; bottom:3px; left:0; width:100%; height:2px; background:#789751; transform:scaleX(0); transition:transform .2s; }
nav > a:hover::after,nav > a[aria-current="page"]::after { transform:scaleX(1); }
.nav-cta { background:var(--forest); color:var(--paper); padding:11px 21px; border-radius:3px; }
.nav-cta:hover { background:#2c5b45; }
.menu-toggle { display:none; }
.skip-link { position:absolute; top:-100px; left:12px; z-index:10; padding:12px; background:var(--lime); }
.skip-link:focus { top:12px; }
.photo-hero { position:relative; isolation:isolate; background:#14291e; overflow:hidden; color:#fff; min-height:610px; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; z-index:-3; }
.hero-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(8,29,23,.89),rgba(8,29,23,.68) 35%,rgba(8,29,23,.12) 75%),linear-gradient(0deg,rgba(8,29,23,.45),transparent 40%); }
.hero-inner { padding-top:77px; padding-bottom:25px; }
.eyebrow { font-family:"Consolas","Courier New",monospace; font-size:10px; font-weight:600; letter-spacing:.12em; color:#61794e; }
.photo-hero .eyebrow { color:var(--lime); }
h1 { font-size:clamp(36px,3.9vw,57px); font-weight:650; margin-top:24px; line-height:1.45; }
.hero-description { font-size:16px; color:#eef1e8; line-height:1.95; margin-top:24px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:30px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; padding:14px 24px; border-radius:3px; background:var(--forest); color:var(--paper); font-size:13px; font-weight:650; transition:background .2s,transform .2s; }
.button:hover { background:#2d5c46; transform:translateY(-2px); }
.button span { font-size:20px; line-height:1; }
.button-lime { color:var(--ink); background:var(--lime); }
.button-lime:hover { background:#e8f8c2; }
.button-light { color:var(--forest); background:var(--paper); }
.button-light:hover { background:var(--lime); }
.hero-text-link { display:inline-flex; align-items:center; gap:21px; font-size:13px; color:#fff; padding-block:10px; border-bottom:1px solid #aec5ad; }
.hero-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #edf5e72c; padding-top:17px; margin-top:60px; font-size:10px; color:#e4eadc; }
.hero-bottom span:last-child { font-size:9px; opacity:.8; }
.breadcrumb { display:flex; align-items:center; gap:14px; padding-block:17px; color:#6b786b; font-size:10px; border-bottom:1px solid var(--line); }
.breadcrumb a:hover { text-decoration:underline; }
.section { padding-block:86px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:37px; }
.section-heading h2 { margin-top:17px; }
h2 { font-size:clamp(30px,3vw,42px); font-weight:600; line-height:1.5; }
.section-heading > p { font-size:13px; line-height:1.9; max-width:370px; }
.lead { font-size:18px; line-height:1.95; margin-top:25px; }
.intro-row { display:grid; grid-template-columns:.6fr 1.4fr; gap:85px; }
.intro-row > .eyebrow { padding-top:12px; }
.intro-row > div { max-width:830px; }
.intro-row p:not(.lead) { margin-top:22px; font-size:14px; }
.intro-row > .eyebrow { margin-top:0; }
.soft-section { background:var(--soft); }
.service-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.service-tile { background:var(--paper); border:1px solid #d9dfd3; }
.tile-image { position:relative; overflow:hidden; aspect-ratio:1.9; }
.tile-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.service-tile:hover img { transform:scale(1.04); }
.tile-image > span { position:absolute; right:20px; bottom:20px; height:41px; width:41px; display:grid; place-items:center; background:var(--lime); border-radius:50%; font-size:24px; }
.tile-copy { padding:27px 30px 30px; }
.tile-copy h3 { font-size:24px; margin-top:11px; }
.tile-copy > p:not(.eyebrow) { font-size:13px; margin-top:12px; }
.tile-link { display:inline-block; margin-top:20px; font-size:12px; border-bottom:1px solid #bbc9ad; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }
.split h2 { margin-top:17px; }
.split figure img { width:100%; height:420px; object-fit:cover; object-position:65% center; }
figcaption { margin-top:8px; color:#6a7868; font-size:9px; }
.checklist { padding:0; list-style:none; margin:25px 0 0; }
.checklist li { padding:12px 0 12px 25px; border-top:1px solid var(--line); position:relative; font-size:13px; }
.checklist li::before { content:"✓"; position:absolute; left:0; color:#6f8f4b; }
.cards { display:grid; gap:23px; }
.columns-3 { grid-template-columns:repeat(3,1fr); }
.columns-2 { grid-template-columns:repeat(2,1fr); }
.card { padding:31px; border:1px solid var(--line); background:var(--paper); }
.card-number { font:12px "Consolas",monospace; color:#759554; }
.card h3 { margin-top:32px; font-size:24px; }
.card p { font-size:13px; margin-top:16px; }
.card ul { margin:25px 0 0; list-style:none; padding:0; font-size:12px; }
.card li { border-top:1px solid var(--line); padding:10px 0; }
.card li::before { content:"＋"; color:#789651; margin-right:8px; }
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.steps li { padding:25px 28px 0; border-left:1px solid var(--line); }
.steps li:first-child { padding-left:0; border-left:0; }
.steps li > span { display:flex; justify-content:space-between; color:#799751; font:33px "Georgia",serif; margin-bottom:22px; }
.steps b { font:22px "Segoe UI",sans-serif; }
.steps h3 { font-size:21px; }
.steps p { font-size:13px; margin-top:14px; }
.dark-section { background:var(--forest); color:var(--paper); }
.dark-section p { color:#cedac9; }
.brand-story { max-width:740px; margin-inline:auto; text-align:center; }
.brand-story h2 { font-size:48px; margin-top:17px; }
.brand-story > p:not(.eyebrow) { margin-top:24px; font-size:16px; }
.brand-story .button { margin-top:30px; }
.table-scroll { overflow:auto; border:1px solid var(--line); background:var(--paper); }
table { width:100%; border-collapse:collapse; text-align:left; min-width:640px; font-size:13px; }
caption { text-align:left; padding:16px 23px; color:var(--muted); font-size:11px; }
th,td { padding:20px 23px; border-top:1px solid var(--line); }
thead th { background:#e1e8d5; font-weight:650; }
tbody th { font-weight:600; }
.small-note { font-size:11px; margin-top:23px; }
.faq-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
.faq-layout h2 { margin-top:17px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { display:flex; align-items:center; justify-content:space-between; list-style:none; padding:23px 0; font-size:14px; gap:20px; font-weight:600; }
summary::-webkit-details-marker { display:none; }
summary > span { font-size:22px; flex-shrink:0; transition:transform .2s; }
details[open] summary > span { transform:rotate(45deg); }
details p { font-size:13px; padding:0 28px 24px 0; }
.cta-section { background:#e2ead4; }
.cta-layout { display:flex; justify-content:space-between; gap:50px; align-items:center; }
.cta-layout h2 { margin-top:18px; }
.cta-layout p:not(.eyebrow) { margin-top:20px; font-size:14px; max-width:750px; }
.cta-layout .button { flex-shrink:0; }
.site-footer { background:#fafbf7; padding-top:65px; }
.footer-grid { display:grid; grid-template-columns:1fr .9fr 1.1fr; gap:60px; padding-bottom:50px; }
.footer-grid h3 { font-size:13px; font-weight:600; margin-bottom:19px; }
.footer-grid p { font-size:11px; margin-top:8px; }
.footer-grid .wordmark + p { font-size:14px; margin-top:22px; }
.footer-english { font-family:"Georgia",serif; font-style:italic; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; font-size:12px; }
.footer-links a:hover { text-decoration:underline; }
.footer-email { display:inline-block; border-bottom:1px solid var(--line); padding-bottom:4px; font-size:18px; margin-bottom:13px; }
.footer-bottom { padding:21px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:25px; font-size:9px; color:#617061; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.contact-layout h2 { margin-top:18px; }
.email-address { display:inline-block; font-size:clamp(19px,2.5vw,30px); border-bottom:1px solid var(--ink); margin-top:25px; padding-bottom:6px; }
.company-details { margin-top:37px; font-size:12px; }
.company-details > div { display:grid; grid-template-columns:90px 1fr; gap:15px; border-top:1px solid var(--line); padding-block:15px; }
dt { color:var(--muted); }
dd { margin:0; }
.contact-card { padding:40px; background:var(--soft); border:1px solid var(--line); align-self:start; }
.contact-card h3 { font-size:28px; margin-top:20px; }
.contact-card > p:not(.eyebrow) { font-size:13px; margin-top:25px; }
.contact-card .button { margin-top:30px; }
@media (min-width:1600px) { .photo-hero { min-height:690px; } .hero-inner { padding-top:100px; } .hero-bottom { margin-top:80px; } }
@media (max-width:1150px) {
  .container { width:calc(100% - 72px); }
  nav { gap:17px; font-size:12px; }
  .wordmark { font-size:30px; }
  .split,.contact-layout { gap:45px; }
  .card { padding:25px; }
  .footer-grid { gap:30px; }
}
@media (max-width:950px) {
  .header-inner { flex-wrap:wrap; gap:0; padding-block:18px; min-height:80px; }
  .menu-toggle { display:flex; align-items:center; gap:25px; color:var(--ink); background:transparent; font-size:13px; margin-left:auto; padding:10px 0 10px 10px; }
  .menu-toggle span { font-size:23px; line-height:1; }
  nav { display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; padding-top:18px; }
  nav.is-open { display:flex; }
  nav > a { padding:14px 0; border-top:1px solid var(--line); }
  nav > a::after { display:none; }
  nav > a[aria-current="page"] { color:#668639; }
  nav > .nav-cta { padding:12px 18px; margin-top:10px; }
  nav > .nav-cta[aria-current="page"] { color:var(--lime); }
  .hero-inner { padding-top:65px; }
  .photo-hero { min-height:600px; }
  .hero-image { object-position:62% center; }
  .hero-shade { background:linear-gradient(90deg,#082218dd,#08221866),linear-gradient(0deg,#08221866,transparent); }
  .hero-description { font-size:15px; }
  .intro-row { grid-template-columns:1fr; gap:23px; }
  .split { gap:35px; }
  .split figure img { height:360px; }
  .columns-3 { grid-template-columns:1fr; }
  .card { padding:28px; }
  .card h3 { margin-top:16px; }
  .card ul { margin-top:18px; }
  .faq-layout { gap:40px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .footer-grid > div:first-child { grid-column:1 / -1; }
}
@media (max-width:650px) {
  .container { width:calc(100% - 40px); }
  .topbar .container { min-height:30px; }
  .topbar span { font-size:7px; letter-spacing:.015em; }
  .topbar a { font-size:9px; }
  .wordmark { font-size:29px; }
  .wordmark > span { height:30px; width:28px; font-size:28px; }
  .photo-hero { min-height:590px; }
  .hero-inner { padding-top:60px; }
  .hero-image { object-position:62% center; }
  .hero-shade { background:linear-gradient(90deg,#082218e8,#08221879),linear-gradient(0deg,#082218bb,transparent); }
  h1 { font-size:clamp(29px,6.7vw,40px); letter-spacing:-.055em; }
  .hero-description { font-size:13px; line-height:2; margin-top:24px; }
  .photo-hero .eyebrow { font-size:8px; }
  .hero-actions { gap:23px; margin-top:30px; }
  .hero-text-link { font-size:12px; }
  .button { padding:13px 19px; gap:22px; font-size:12px; }
  .hero-bottom { margin-top:72px; font-size:9px; gap:10px; }
  .hero-bottom span:last-child { font-size:8px; white-space:nowrap; }
  .section { padding-block:60px; }
  h2 { font-size:29px; }
  .section-heading { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:28px; }
  .section-heading > p { font-size:12px; }
  .lead { font-size:16px; }
  .service-tiles,.split,.contact-layout,.faq-layout { grid-template-columns:1fr; gap:30px; }
  .service-tiles { gap:24px; }
  .tile-copy { padding:23px; }
  .tile-copy h3 { font-size:22px; }
  .split figure img { height:300px; }
  .steps { grid-template-columns:1fr 1fr; gap:30px 0; }
  .steps li { padding:22px 15px 0; }
  .steps li:nth-child(3) { padding-left:0; border-left:0; }
  .steps li > span { font-size:29px; }
  .steps h3 { font-size:19px; }
  .steps p { font-size:12px; }
  .brand-story h2 { font-size:38px; }
  .brand-story > p:not(.eyebrow) { font-size:14px; }
  .cta-layout { flex-direction:column; align-items:flex-start; gap:28px; }
  .footer-grid { grid-template-columns:1fr; gap:35px; }
  .footer-grid > div:first-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; gap:6px; }
  .contact-card { padding:25px; }
  summary { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }