/* Kohane Design editorial refresh — 2026-10-12 */
:root{
  --ink:#242321;
  --body-c:#45423e;
  --white:#fcfdfd;
  --gray:#f4f8f9;
  --gray-lt:#f9fbfb;
  --gray-band:#e8f0f2;
  --accent:#5c8592;
  --accent-pale:#e5f0f3;
  --sub-d:#a5b8be;
  --sub-l:#69777a;
  --line:rgba(64,85,92,.18);
  --line-d:rgba(255,255,255,.24);
  --wrap:min(100% - 112px, 1380px);
  --measure:720px;
}
body{background:var(--white);font-size:16px;line-height:2;letter-spacing:.055em}
b{color:var(--ink)}
section{padding-block:clamp(80px,8vw,132px)}
.soft{background:var(--gray)}
.light{background:var(--white)}
.sh{border-left:2px solid #85aab5;padding-left:25px;margin-bottom:54px}
.sh .en{font-size:11px;letter-spacing:.3em;color:#527887;text-transform:uppercase}
.sh .ja{font-weight:500;letter-spacing:.09em;margin-top:14px}
.tate{font-size:clamp(16px,1.5vw,19px);font-weight:400;letter-spacing:.21em;color:#575149}
.tate .maru::before{width:2.7em;height:2.7em;background:#e7eff1}
.soft .tate .maru::before{background:#fbfaf7}
.pill,.btn-out{border-radius:2px}
.pill{background:var(--ink);border-color:var(--ink);font-weight:500}
.btn-out{background:transparent;border-color:var(--line);font-weight:500}
.btn-out:hover{border-color:var(--ink)}
header{background:rgba(252,253,253,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.head-in{height:78px}
.logo{font-size:15px;letter-spacing:.17em}
.gnav a.link{font-size:12px;font-weight:500;letter-spacing:.1em}
.gnav .pill{margin-left:22px}
footer{background:#f3f7f8}
.f-line a,.f-nav a{color:#5d5851}

/* The first view borrows the photographed, spacious editorial rhythm of the
   references while keeping Kohane's own words and avoiding a portrait. */
.editorial-hero{
  display:block;min-height:calc(100svh - 78px);padding:0;
  background:#f4f8f9;color:var(--ink);overflow:hidden;
}
.editorial-hero-grid{
  display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
  align-items:stretch;min-height:min(760px,calc(100svh - 132px));
  border-left:1px solid var(--line);border-right:1px solid var(--line)
}
.editorial-copy{padding:clamp(56px,7.2vw,116px) clamp(24px,4vw,64px) 72px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;z-index:2}
.hero-kicker{font-family:var(--num);font-size:11px;letter-spacing:.29em;color:#63767c;margin-bottom:clamp(42px,5vw,82px);white-space:nowrap}
.hero-kicker span{letter-spacing:0;margin:0 .8em;color:#90a9af}
.editorial-hero h1{font-size:clamp(34px,4.2vw,66px);line-height:1.42;letter-spacing:.06em;font-weight:400;margin:0 0 44px;white-space:nowrap}
.editorial-hero h1 span{color:#4f7280}
.hero-lead{font-size:clamp(21px,2.35vw,32px);line-height:1.75;letter-spacing:.12em;font-weight:400;color:var(--ink);margin-bottom:24px}
.hero-body{max-width:36em;font-size:14px;line-height:2.2;letter-spacing:.055em;color:#4d5a5e;margin-bottom:36px}
.hero-actions{display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.hero-actions a{text-decoration:none;font-size:13px;letter-spacing:.08em;font-weight:500;display:inline-flex;gap:28px;align-items:center}
.hero-primary{padding:15px 19px;background:var(--ink);color:#fff}
.hero-primary:hover,.hero-primary:focus-visible{background:#4b4945}
.hero-secondary{padding:13px 0;border-bottom:1px solid #9eb4ba}
.hero-secondary:hover,.hero-secondary:focus-visible{border-color:var(--ink)}
.editorial-visual{margin:0;position:relative;min-width:0;min-height:570px;overflow:hidden}
.editorial-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% center}
.editorial-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,248,249,.24),transparent 34%);pointer-events:none}
.editorial-visual figcaption{position:absolute;bottom:22px;left:25px;z-index:2;font-family:var(--num);font-size:10px;letter-spacing:.25em;color:#37342f;background:rgba(251,250,247,.76);padding:7px 11px}
.editorial-visual figcaption span{color:#a19b90}
.hero-vertical{position:absolute;right:27px;top:28px;z-index:2;writing-mode:vertical-rl;font-size:14px;letter-spacing:.25em;line-height:1.7;color:#302e2a;text-shadow:0 1px 8px rgba(251,250,247,.8)}
.hero-bottom{height:54px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-top:0;font-family:var(--num);font-size:10px;letter-spacing:.19em;color:#63767c}
.hero-bottom a{color:inherit;text-decoration:none}
.hero-bottom a:hover{text-decoration:underline;text-underline-offset:4px}

/* Editorial surfaces and actual work remain the main proof. */
#works{background:var(--white)}
#works .sh{margin-bottom:65px}
.work-row{background:transparent!important;border-top-color:#d6d0c5;padding:58px 16px}
.work-row:last-of-type{border-bottom-color:#d6d0c5}
.work-row.lit,.work-row.lit .name,.work-row.lit b,.work-row.lit strong{color:var(--body-c)!important}
.work-row:hover{background:#f5f2eb!important}
.work-row .cat{color:#746c60;opacity:1;font-size:11px;letter-spacing:.19em}
.work-row .name{font-weight:400;letter-spacing:.08em}
.work-row .plan-tag{background:#eee9df}
.work-row.lit .plan-tag,.work-row.sample-row.lit .plan-tag{background:#eee9df;color:var(--ink)}
.work-row .wshot .sh1,.work-row .wshot .sh2,.work-row.lit .wshot .sh1,.work-row.lit .wshot .sh2{border-color:#d7d0c4}
.wshot img{box-shadow:0 18px 32px rgba(43,40,35,.08)}
.work-row .go{color:var(--ink)}
.work-row.with-shot.lit .deliv li,.work-row.with-shot.lit .plan-tag{color:var(--body-c)}
.work-row.with-shot.lit .w-desc{border-top-color:#d6d0c5}
.work-row.lit .go{background:transparent;color:var(--ink);border-color:#9f968a}
.top-notes{background:#f7f9f9}
.top-note{background:var(--white);border-color:#dce6e8}
.top-note:hover{background:#eff5f6}
.nrows{background:#f4f8f8;border-radius:0}
.nrows .n{color:#8ea7ae}
.checks li{border-bottom-style:solid}
.checks li:first-child{border-top-style:solid}
.checks .ck{font-family:var(--num);font-size:17px}
.em-a{color:#527887}
.proc::before{background:#c9dade}
.proc .dot{background:#7fa4af;box-shadow:0 0 0 4px #e9f2f4}
.proc .n{color:#527887}
#flow .mk::before{background:#e4f0f3}

/* Estimate explanation replaces the public rate cards. */
.cost-section{background:#f5f8f9}
.cost-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:50px;align-items:end;margin-bottom:64px}
.cost-heading .sh{margin:0}
.cost-intro{font-size:clamp(17px,1.8vw,21px);line-height:1.85;color:var(--ink)}
.cost-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #c7d9de;border-bottom:1px solid #c7d9de}
.cost-grid>div{padding:34px 32px 40px;min-width:0}
.cost-grid>div:first-child{padding-left:0}
.cost-grid>div+div{border-left:1px solid #d7e4e7}
.cost-number{font-family:var(--num);display:block;font-size:13px;letter-spacing:.2em;color:#527887;margin-bottom:38px}
.cost-grid h3{font-size:19px;font-weight:500;letter-spacing:.11em;margin-bottom:20px;color:var(--ink)}
.cost-grid p{font-size:14px;line-height:2;max-width:29em;color:#5f5952}
.cost-follow{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:46px}
.cost-follow p{font-size:14px;max-width:670px;color:#494540}
.cost-follow .btn-out{white-space:nowrap;background:var(--white);border-color:#b7cdd2}
.faq{border-top:1px solid #8b8175}
.faq-item{border-bottom-color:#d3ccc0}

/* Footer and case studies follow the same warm paper and quiet rules. */
.cta.dark{background:#eaf2f4;color:var(--ink)}
.cta.dark b,.cta.dark .sh .ja{color:var(--ink)}
.cta.dark .sh .en{color:#527887}
.cta.dark .pill{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta.dark a:not(.pill){color:var(--ink)}
.case-study{--case-line:#dbe5e7;--case-muted:#687477;--case-bg:#f4f8f9;background:var(--white)}
.case-study .case-hero{padding-top:54px}
.case-study .case-eyebrow{color:#527887;letter-spacing:.23em}
.case-study .case-title{font-weight:400;letter-spacing:.06em;line-height:1.45}
.case-study .case-cover{background:#f4f8f9}
.case-study .case-section{border-bottom-color:var(--case-line);gap:clamp(28px,4vw,65px)}
.case-study .case-section>h2{border-left:2px solid #85aab5;padding-left:23px}
.case-study .case-section h2 span{color:#527887;letter-spacing:.2em}
.case-study .case-footer h2{border-left:2px solid #85aab5}
.case-study .case-nav{border-top:1px solid var(--case-line);border-bottom-color:var(--case-line)}
.case-study .case-nav a:hover{color:#527887}
.case-study .case-link{text-decoration-color:#85aab5}
.case-study .plan-sample-note{background:#f4f8f9;color:#687477}

@media(max-width:1000px){
  :root{--wrap:calc(100% - 64px)}
  .editorial-hero-grid{grid-template-columns:minmax(0,47%) minmax(0,53%)}
  .editorial-copy{padding-right:20px}
  .editorial-hero h1{font-size:clamp(31px,4.5vw,48px)}
  .editorial-visual{min-height:570px}
  .cost-grid>div{padding-inline:22px}
}
@media(max-width:760px){
  :root{--wrap:calc(100% - 40px)}
  body{font-size:15px;line-height:1.92}
  header{background:rgba(252,253,253,.97)}
  .head-in{height:66px}
  .guides{transform:none}
  .editorial-hero-grid{grid-template-columns:1fr;min-height:0;border:0}
  .editorial-copy{padding:58px 0 48px}
  .hero-kicker{font-size:9px;letter-spacing:.21em;margin-bottom:36px}
  .editorial-hero h1{font-size:clamp(34px,9vw,55px);margin-bottom:32px;white-space:normal;line-height:1.4}
  .hero-lead{font-size:22px;margin-bottom:17px}
  .hero-body{font-size:13px;margin-bottom:29px}
  .hero-actions{gap:22px}
  .hero-actions a{font-size:12px}
  .editorial-visual{height:clamp(370px,98vw,560px);min-height:0;margin-inline:-20px}
  .editorial-visual img{object-position:68% center}
  .hero-vertical{right:22px;top:20px;font-size:12px}
  .editorial-visual figcaption{left:20px;bottom:16px;font-size:8px}
  .hero-bottom{height:50px;font-size:8px;letter-spacing:.08em;border:0;gap:12px}
  .hero-bottom span{max-width:55%;line-height:1.4}
  .sh{padding-left:17px;margin-bottom:38px}
  .sh .en{font-size:10px}
  .sh .ja{font-size:23px}
  .work-row{padding:34px 0}
  .cost-heading{grid-template-columns:1fr;gap:28px;margin-bottom:34px}
  .cost-grid{grid-template-columns:1fr}
  .cost-grid>div,.cost-grid>div:first-child{padding:26px 0}
  .cost-grid>div+div{border-left:0;border-top:1px solid #d7e4e7}
  .cost-number{margin-bottom:10px}
  .cost-grid h3{margin-bottom:9px}
  .cost-follow{display:block;margin-top:30px}
  .cost-follow p{margin-bottom:24px}
  .case-study .case-hero{padding-top:27px}
  .case-study .case-section>h2{padding-left:15px}
}
@media(prefers-reduced-motion:reduce){
  .editorial-hero h1{animation:none!important}
  .editorial-visual img{transition:none!important}
}