/* ============================================================
   iHomepage CMS — global stylesheet
   Tokens, base type, header, footer, shared components.
   Page-specific layout lives in each page's <style> block.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --brand:#F8442F; --brand-2:#F87840; --brand-soft:#FDE7E1;
  --ink:#23201C; --ink-soft:#5B564F; --ink-faint:#94908A;
  --paper:#FBFAF7; --paper-2:#F4F2ED; --line:#E4E0D8;
  --dark:#1E1B17; --dark-line:rgba(255,255,255,.14);
  --font-display:'Shippori Mincho B1','Times New Roman',serif;
  --font-body:'Zen Kaku Gothic New','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1240px; --tr:.35s cubic-bezier(.25,.6,.3,1);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{font-family:var(--font-body); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.8; overflow-x:hidden; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); font-weight:600;
  letter-spacing:.01em; color:var(--ink)}
a{color:var(--brand)} a:hover{color:#d4331f; text-decoration:none}
img{max-width:100%}
.container-x{max-width:var(--maxw); margin:0 auto; padding-left:24px; padding-right:24px}
.section-pad{padding:104px 0}
.band{background:var(--paper-2)}
@media (max-width:767.98px){ .section-pad{padding:64px 0} body{font-size:15px} }

/* ---------- Shared type helpers ---------- */
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-soft); display:inline-flex;
  align-items:center; margin-bottom:20px}
.eyebrow .enso-tick{width:18px; height:18px; margin-right:12px; flex:none}
.enso-tick circle{fill:none; stroke:var(--brand); stroke-width:2; stroke-dasharray:42 14;
  stroke-linecap:round; transform:rotate(-70deg); transform-origin:center}
.sec-title{font-size:38px; line-height:1.35; margin-bottom:20px}
.sec-lead{color:var(--ink-soft); max-width:620px}
.mono-label{font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint)}
@media (max-width:767.98px){ .sec-title{font-size:28px} }

/* ---------- Buttons ---------- */
.btn-x{display:inline-block; font-weight:700; font-size:15px; border-radius:2px;
  padding:15px 40px; transition:transform var(--tr), box-shadow var(--tr), background var(--tr);
  border:1px solid transparent; cursor:pointer}
.btn-x:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(35,32,28,.14)}
.btn-solid{background:var(--ink); color:#fff} .btn-solid:hover{background:var(--brand); color:#fff}
.btn-ghost{border-color:var(--ink); color:var(--ink)} .btn-ghost:hover{color:var(--ink)}
.btn-sm{padding:11px 26px; font-size:14px}

/* ---------- Topbar ---------- */
.topbar{background:var(--dark); color:rgba(255,255,255,.75);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em}
.topbar .container-x{display:flex; justify-content:space-between; align-items:center; height:38px}
.topbar a{color:rgba(255,255,255,.75)} .topbar a:hover{color:#fff}
.topbar .dot{color:var(--brand); margin:0 10px}
@media (max-width:991.98px){ .topbar{display:none} }

/* ---------- Navbar ---------- */
.navbar-ih{background:rgba(251,250,247,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; padding:20px 0;
  transition:padding var(--tr), box-shadow var(--tr), border-color var(--tr)}
.navbar-ih.is-shrunk{padding:10px 0; border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(35,32,28,.06)}
.navbar-ih .navbar-brand img{height:40px; transition:height var(--tr)}
.navbar-ih.is-shrunk .navbar-brand img{height:33px}
.navbar-ih .navbar-brand span{font-family:var(--font-display); font-size:20px;
  font-weight:600; color:var(--ink); margin-left:12px; vertical-align:middle}
.navbar-ih .nav-link{color:var(--ink); font-weight:500; font-size:15px;
  margin-left:30px; padding:6px 0 !important; position:relative}
.navbar-ih .nav-link::after{content:""; position:absolute; left:0; bottom:0; height:2px;
  width:100%; background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--tr)}
.navbar-ih .nav-link:hover::after,.navbar-ih .nav-link.active::after{transform:scaleX(1)}
.navbar-ih .nav-link:hover{color:var(--ink)}
.navbar-ih .navbar-toggler{border:1px solid var(--line); border-radius:2px; padding:8px 10px}
.navbar-ih .navbar-toggler:focus{outline:2px solid var(--brand); outline-offset:2px}
.navbar-ih .navbar-toggler-icon{width:22px; height:16px; background-position:center;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath stroke='%23F8442F' stroke-width='2' stroke-linecap='round' d='M1 1h20M1 8h20M1 15h20'/%3E%3C/svg%3E")}
@media (max-width:991.98px){
  .navbar-ih .nav-link{margin-left:0; padding:12px 0 !important; border-bottom:1px solid var(--line)}
  .navbar-ih .nav-link::after{display:none}
  .navbar-ih .nav-link.active{color:var(--brand)}
}

/* ---------- Inner-page hero (shared by all non-home pages) ---------- */
.page-hero{background:linear-gradient(180deg,#FCFBF8 0%,#F7F4EF 100%);
  border-bottom:1px solid var(--line); padding:72px 0 64px; position:relative; overflow:hidden}
.page-hero h1{font-size:clamp(32px,4.2vw,50px); line-height:1.26; margin-bottom:18px; max-width:16em}
.page-hero .lead-x{font-size:18px; color:var(--ink-soft); max-width:620px; margin-bottom:0}
.page-hero .enso-deco{position:absolute; right:-90px; top:50%; transform:translateY(-50%);
  width:340px; height:340px; opacity:.5; pointer-events:none}
.page-hero .enso-deco circle{fill:none; stroke:var(--brand-soft); stroke-width:3;
  stroke-dasharray:600 130; stroke-linecap:round}
@media (max-width:767.98px){ .page-hero{padding:48px 0 44px} .page-hero .enso-deco{display:none} }

/* ---------- Breadcrumb ---------- */
.crumb{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  color:var(--ink-faint); margin-bottom:18px}
.crumb a{color:var(--ink-faint)} .crumb a:hover{color:var(--brand)}
.crumb .sep{margin:0 9px; opacity:.6}

/* ---------- Prose (legal pages + articles) ---------- */
.prose{color:var(--ink-soft); font-size:16px; line-height:1.9}
.prose h2{font-size:26px; margin:48px 0 16px; scroll-margin-top:110px}
.prose h3{font-size:19px; margin:32px 0 12px; scroll-margin-top:110px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{padding-left:22px; margin-bottom:18px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink); font-weight:700}
.prose table{width:100%; border-collapse:collapse; margin:22px 0; font-size:14.5px}
.prose th,.prose td{border:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top}
.prose th{background:var(--paper-2); font-family:var(--font-mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:500}
.prose blockquote{border-left:2px solid var(--brand); padding-left:22px; margin:26px 0;
  font-family:var(--font-display); font-size:19px; color:var(--ink); line-height:1.8}
.prose code{font-family:var(--font-mono); font-size:13.5px; background:var(--paper-2);
  padding:2px 6px; border-radius:2px; color:var(--ink)}
.prose hr{border:none; border-top:1px solid var(--line); margin:40px 0}
/* narrow screens: let wide tables scroll instead of forcing the page wider */
@media (max-width:767.98px){
  .prose table{display:table; table-layout:fixed; width:100%; max-width:100%}
  .prose th,.prose td{padding:9px 10px; font-size:13.5px; word-break:break-word}
  .prose code{word-break:break-word}
}

/* sticky table of contents */
.toc{position:sticky; top:104px}
.toc h4{font-family:var(--font-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px}
.toc ul{list-style:none; padding:0; margin:0; border-left:1px solid var(--line)}
.toc li{margin:0}
.toc a{display:block; padding:7px 0 7px 18px; font-size:14px; color:var(--ink-soft);
  border-left:2px solid transparent; margin-left:-1px; transition:all var(--tr); line-height:1.5}
.toc a:hover{color:var(--ink)}
.toc a.active{color:var(--brand); border-left-color:var(--brand)}
@media (max-width:991.98px){ .toc{position:static; margin-bottom:40px} }

/* ---------- Footer ---------- */
.footer{background:var(--dark); color:rgba(255,255,255,.62); font-size:14px}
.footer a{color:rgba(255,255,255,.62)} .footer a:hover{color:#fff}
.footer .f-top{padding-top:84px; padding-bottom:60px; border-bottom:1px solid var(--dark-line)}
.footer .f-brand img{height:40px; margin-bottom:22px}
.footer .f-brand p{max-width:320px; color:rgba(255,255,255,.55); line-height:1.8}
.footer .f-entity{margin-top:26px; padding-top:22px; border-top:1px solid var(--dark-line)}
.footer .f-entity .name{font-family:var(--font-display); color:rgba(255,255,255,.88);
  font-size:15px; letter-spacing:.02em}
.footer .f-entity .role{font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:5px}
.footer h4{font-family:var(--font-mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:22px}
.footer ul{list-style:none; padding:0; margin:0} .footer ul li{margin-bottom:13px}
.footer .c-row{display:flex; align-items:flex-start; margin-bottom:18px; line-height:1.65}
.footer .c-row svg{width:16px; height:16px; flex:none; margin:3px 12px 0 0;
  stroke:var(--brand); fill:none}
.footer .c-row a,.footer .c-row span{color:rgba(255,255,255,.72)}
.footer .c-row a:hover{color:#fff} .footer .c-row .addr{font-style:normal}
.footer .f-bottom{padding-top:26px; padding-bottom:26px; font-family:var(--font-mono);
  font-size:12px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; color:rgba(255,255,255,.42)}
.footer .f-bottom .legal a{color:rgba(255,255,255,.42)}
.footer .f-bottom .legal a:hover{color:rgba(255,255,255,.8)}
.footer .f-bottom .sep{margin:0 10px; opacity:.4}
@media (max-width:767.98px){
  .footer .f-top{padding-top:56px; padding-bottom:40px}
  .footer .f-col{margin-bottom:34px} .footer .f-bottom{justify-content:flex-start}
}

/* ---------- Back to top ---------- */
.to-top{position:fixed; right:26px; bottom:26px; width:46px; height:46px; z-index:1040;
  background:var(--ink); color:#fff; border:none; border-radius:50%; opacity:0;
  visibility:hidden; transform:translateY(10px);
  transition:opacity var(--tr), transform var(--tr), background var(--tr), visibility var(--tr)}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0)}
.to-top:hover{background:var(--brand)}
.to-top:focus{outline:2px solid var(--brand); outline-offset:2px}

/* ---------- Cookie consent (EU) ---------- */
.cookie-bar{position:fixed; left:0; right:0; bottom:0; z-index:1060; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -10px 40px rgba(35,32,28,.10);
  transform:translateY(110%); transition:transform .45s cubic-bezier(.25,.6,.3,1)}
.cookie-bar.show{transform:translateY(0)}
.cookie-bar .inner{max-width:var(--maxw); margin:0 auto; padding:22px 24px; display:flex;
  align-items:center; gap:26px; flex-wrap:wrap}
.cookie-bar .txt{flex:1 1 420px; font-size:14px; color:var(--ink-soft); line-height:1.7; margin:0}
.cookie-bar .txt strong{display:block; font-family:var(--font-display); font-size:16px;
  color:var(--ink); margin-bottom:5px; font-weight:600}
.cookie-bar .acts{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.cookie-btn{font-family:var(--font-body); font-size:14px; font-weight:700; border-radius:2px;
  padding:11px 24px; cursor:pointer; border:1px solid var(--ink); transition:all var(--tr)}
.cookie-btn.accept{background:var(--ink); color:#fff; border-color:var(--ink)}
.cookie-btn.accept:hover{background:var(--brand); border-color:var(--brand)}
.cookie-btn.reject{background:transparent; color:var(--ink)}
.cookie-btn.reject:hover{background:var(--paper-2)}
.cookie-bar .prefs-link{font-size:13px; color:var(--ink-faint); text-decoration:underline}
@media (max-width:767.98px){
  .cookie-bar .inner{padding:18px; gap:16px}
  .cookie-bar .acts{width:100%} .cookie-btn{flex:1 1 auto; text-align:center}
}

/* ---------- Utility ---------- */
.no-aos [data-aos]{opacity:1 !important; transform:none !important}
.hairline{border-top:1px solid var(--line)}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;
    animation-iteration-count:1 !important; transition-duration:.001s !important}
  [data-aos]{opacity:1 !important; transform:none !important}
}
