/* DebtIs Capital — corporate site */
:root{
  --navy:#14233D;
  --navy-2:#22365A;
  --ink:#2A2620;
  --body:#3D372E;
  --muted:#6E6658;
  --line:#D6CCB8;
  --line-soft:#E6DECE;
  --bg:#FBF8F1;      /* warm paper */
  --bg-alt:#F2ECDF;  /* parchment */
  --card:#FFFDF8;
  --gold:#A07834;    /* antique brass */
  --on-navy:#FFFFFF;
  --on-navy-dim:#C9C3B4;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --serif:"Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --serif-body:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --en:"Cormorant Garamond","Times New Roman",serif;
  --num:"EB Garamond","Cormorant Garamond",serif; /* figures: classic but legible */
  --wrap:1080px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 12px)}
body{background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27700%27 height=%27700%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.006%27 numOctaves=%273%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.084 -0.037%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/700px 700px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27300%27 height=%27300%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.05%27 numOctaves=%275%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.042 -0.019%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/300px 300px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 seed=%271%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.048 -0.022%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/220px 220px repeat, var(--bg);color:var(--body);font-family:var(--serif-body);font-size:15px;line-height:1.9;letter-spacing:.02em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
br.sp{display:none}
.nw{white-space:nowrap} /* keep a phrase BudouX would split badly */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;width:100%;height:var(--header-h);z-index:100;background:var(--bg);border-bottom:3px double var(--line)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px} /* same width as the content so the logo lines up with the text below */
.brand{display:flex;align-items:center;gap:10px;color:var(--navy)}
.brand img{width:32px}
.brand .name{font-family:var(--en);font-size:1.2rem;font-weight:500;letter-spacing:.08em;white-space:nowrap}
.gnav{display:flex;align-items:center;gap:20px}
.gnav a{font-size:.86rem;font-weight:500;color:var(--ink);white-space:nowrap}
.gnav a[lang="en"]:not(.nav-cta){font-family:var(--en),var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:.08em} /* English menu set in the wordmark face */
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--navy)}
/* Hairline brass underline that opens from the centre */
.gnav a:not(.h-tel):not(.nav-cta){position:relative}
.gnav a:not(.h-tel):not(.nav-cta)::after{content:"";position:absolute;left:50%;bottom:-7px;width:0;height:1px;background:var(--gold);transform:translateX(-50%);transition:width .3s ease}
.gnav a:not(.h-tel):not(.nav-cta):hover::after,.gnav a:not(.h-tel):not(.nav-cta)[aria-current="page"]::after{width:100%}
.h-tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;margin-left:8px}
.h-tel small{font-size:.7rem;color:var(--muted)}
.h-tel b{font-size:1.05rem;color:var(--navy);letter-spacing:.04em;transition:color .25s}
.h-tel small{transition:color .25s}
.h-tel:hover b,.h-tel:hover small{color:var(--gold)} /* show it is clickable (tap-to-call on phones) */
.gnav .nav-cta{background:var(--navy);color:#fff;padding:10px 20px;font-size:.86rem}
.gnav .nav-cta:hover{background:var(--navy-2);color:#fff;text-decoration:none}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{position:absolute;left:11px;width:22px;height:2px;background:var(--navy);content:""}
.menu-btn span{top:21px}
.menu-btn span::before{left:0;top:-7px}
.menu-btn span::after{left:0;top:7px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-7px) rotate(-45deg)}

main{padding-top:var(--header-h)}

/* ---------- Headings ---------- */
/* Double rule (2px over 1px) under section headings, as on old printed matter */
.h2{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,1.75rem);font-weight:700;color:var(--navy);letter-spacing:.06em;line-height:1.5;padding-bottom:14px;margin-bottom:32px;background:linear-gradient(var(--navy),var(--navy)) left 0 bottom 4px/100% 2px no-repeat,linear-gradient(var(--navy),var(--navy)) left bottom/100% 1px no-repeat}
.page-title h1[lang="en"]{font-family:var(--en),var(--serif);font-weight:600;letter-spacing:.06em;font-size:clamp(2rem,3.6vw,2.6rem)}
.h2[lang="en"]{font-family:var(--en),var(--serif);font-size:clamp(1.7rem,3vw,2.15rem);font-weight:600;letter-spacing:.06em} /* English section titles, in the wordmark face like the menus */
/* Gold diamond from the symbol marks every sub-heading (centered on the first line) */
.h3{position:relative;font-family:var(--serif);font-size:1.12rem;font-weight:700;color:var(--navy);line-height:1.6;padding-left:20px}
.h3::before{content:"";position:absolute;left:2px;top:calc(.8em - 4px);width:8px;height:8px;background:linear-gradient(to bottom right,#C99B4C 50%,#7E5C24 50%);transform:rotate(45deg)} /* two crisp facets (lit top / shaded bottom) instead of a blur, so it stays sharp at 8px */
/* Diamond from the symbol, used as list marker and separator */
.dia li{position:relative;padding-left:20px}
.dia li::before{content:"";position:absolute;left:3px;top:.72em;width:7px;height:7px;background:linear-gradient(to bottom right,#33476E 50%,#0E1A2F 50%);transform:rotate(45deg)}
.section{padding:clamp(48px,7vw,80px) 0}
.section.alt{background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27700%27 height=%27700%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.006%27 numOctaves=%273%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.084 -0.037%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/700px 700px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27300%27 height=%27300%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.05%27 numOctaves=%275%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.042 -0.019%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/300px 300px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 seed=%271%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.048 -0.022%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/220px 220px repeat, var(--bg-alt)} /* faint parchment grain on every plain background; heading bands keep their stronger texture */
.section+.section{padding-top:clamp(36px,5.5vw,68px)}
.section.section-compact{padding:clamp(20px,3vw,32px) 0 clamp(24px,3.5vw,40px)} /* short list (top-page news): less air so it doesn't read as a heavy block */
.en{font-size:.86rem;color:var(--muted);line-height:1.8;margin-top:10px}
.link{display:inline-block;color:var(--navy);font-weight:500;font-size:.9rem;margin-top:24px}
.link::after{content:"›";margin-left:8px}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.links-row{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:24px}
.links-row .link{margin-top:0}
.pf a{transition:opacity .2s}
.pf a:hover{opacity:.75}
/* Heading with a link on the right: the heading rule runs full width, the link sits above it */
.head-row{position:relative}
.head-row .h2{padding-right:7em}
.head-row .link{position:absolute;right:0;bottom:18px;margin:0} /* h2 margin collapses out of the row, so measure from the rule */

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;font-size:.92rem;font-weight:500;border:1px solid var(--navy)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-ghost{color:var(--navy);background:var(--card)}
.btn-ghost:hover{background:var(--bg-alt)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- Home: main visual ---------- */
.mv{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);display:flex;align-items:center;min-height:clamp(500px,45.4vw,581px)} /* keep the band as tall as before even with fewer lines */
.mv>.wrap{width:100%}
.mv::after{content:"";position:absolute;inset:14px;border:1px solid rgba(160,120,52,.55);pointer-events:none}
.mv .wrap{position:relative;z-index:1;padding-top:clamp(64px,9vw,104px);padding-bottom:clamp(64px,9vw,104px)}
/* The symbol, laid faintly behind the main visual */
/* Clipped to the brass frame so the arch stays inside it */
/* Parchment with a strong burnt edge inside the frame (antique paper); mottling kept light on navy */
.mv-deco{position:absolute;inset:15px;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(0,0,0,.48) 100%), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27700%27 height=%27700%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.006%27 numOctaves=%273%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0.034 -0.015%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/700px 700px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27300%27 height=%27300%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.05%27 numOctaves=%275%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0.017 -0.008%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/300px 300px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 seed=%271%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0.020 -0.009%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/220px 220px repeat}
.mv-mark{position:absolute;right:-7%;top:-14%;height:150%;width:auto;max-width:none;opacity:.14} /* logo at its original aspect ratio, cropped by the frame */
.mv h1{font-family:var(--serif);font-weight:700;color:rgba(255,255,255,.84);font-size:clamp(1.9rem,4.2vw,2.9rem);letter-spacing:.08em;line-height:1.55}
.mv .mv-name{display:block;font-family:var(--en),var(--serif);font-size:clamp(.95rem,1.6vw,1.1rem);font-weight:500;letter-spacing:.14em;color:#D8B56A;margin-bottom:18px}
.mv .mv-def{font-family:var(--serif);font-weight:500;font-size:clamp(.8rem,1.1vw,.92rem);line-height:1.8;letter-spacing:.03em;color:rgba(255,255,255,.78);margin-top:14px} /* plain-text definition of the company, for search and AI answers */
.mv .mv-en{font-size:.9rem;color:var(--on-navy-dim);margin-top:12px;letter-spacing:.04em}
.mv .mv-en-gold{font-size:clamp(.95rem,1.5vw,1.08rem);color:#D8B56A;letter-spacing:.08em;margin-top:14px} /* the gold the company-name line used to carry */
.mv .mv-text{word-break:keep-all;overflow-wrap:anywhere;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.25);max-width:600px;color:var(--on-navy-dim)}
.mv .mv-text strong{display:block;color:rgba(255,255,255,.84);font-weight:700;margin-bottom:6px}

/* ---------- News ---------- */
.news-list{border-top:1px solid var(--line)}
.news-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;padding:18px 4px;border-bottom:1px solid var(--line)}
.news-list time{color:var(--muted);font-size:.9rem;min-width:88px}
.news-list .cat{font-size:.72rem;border:1px solid var(--navy);color:var(--navy);padding:0 10px;min-width:72px;text-align:center}
.news-list .title{flex:1;min-width:200px;color:var(--ink)}

/* ---------- Boxes ---------- */
.boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.box{background:var(--card);border:1px solid var(--line);padding:26px 28px}
.box p{margin-top:12px}
.links3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.links3 a{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);padding:22px 24px;font-family:var(--serif);font-weight:700;color:var(--navy)}
.links3 a::after{content:"›";font-size:1.3rem;font-weight:400}
.links3 a:hover{border-color:var(--navy)}

/* Certificate-style double frame on framed blocks */
.box,.contact-box,.member,.gate,.calc{box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 5px var(--line-soft)}

/* Corner ornaments: a brass diamond on each corner of the frame, with a small L-bracket inside */
.corners{position:absolute;inset:var(--ci,14px);pointer-events:none;z-index:2}
.corners i{position:absolute;width:0;height:0}
.corners i::before{content:"";position:absolute;left:calc(var(--cd,7px)/-2);top:calc(var(--cd,7px)/-2);width:var(--cd,7px);height:var(--cd,7px);background:var(--gold);transform:rotate(45deg)}
.corners i::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--gold)}
.corners i:nth-child(1){left:0;top:0}
.corners i:nth-child(2){right:0;top:0}
.corners i:nth-child(3){left:0;bottom:0}
.corners i:nth-child(4){right:0;bottom:0}
.corners i:nth-child(1)::after{left:6px;top:6px;border-left-width:1px;border-top-width:1px}
.corners i:nth-child(2)::after{right:6px;top:6px;border-right-width:1px;border-top-width:1px}
.corners i:nth-child(3)::after{left:6px;bottom:6px;border-left-width:1px;border-bottom-width:1px}
.corners i:nth-child(4)::after{right:6px;bottom:6px;border-right-width:1px;border-bottom-width:1px}
.mv .corners{opacity:.85}

/* Classic Western figures for dates and numbers; Japanese falls back to the serif */
.news-list time,.h-tel b,.contact-box .btn-ghost,.result-val,.mix-legend b,.calc input{font-family:var(--num),var(--serif-body);font-variant-numeric:lining-nums}
/* Figures set inside Japanese text: a touch larger so they sit level with the kanji */
.fig{font-family:var(--num);font-variant-numeric:lining-nums;font-size:1.08em;letter-spacing:.01em}
.news-list time{font-size:1.05rem}
.h-tel b{font-size:1.12rem;font-weight:600}

/* ---------- Contact box ---------- */
.contact-box{border:1px solid var(--line);background:var(--card);padding:clamp(36px,5vw,56px) clamp(24px,5vw,56px);display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:center}
.contact-box .ttl{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.7rem);font-weight:700;color:var(--navy);letter-spacing:.06em}
.contact-box p{margin-top:12px;font-size:1.02rem}
.contact-box .tel{font-size:1.5rem;font-weight:700;color:var(--navy);letter-spacing:.04em}
.tel-inline{font-family:var(--num),var(--serif-body);font-variant-numeric:lining-nums;font-size:1.12em;font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s}
.tel-inline:hover{color:var(--gold)}
.contact-box .side{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:300px}
.contact-box .side .btn{min-height:58px;font-size:1rem}

/* ---------- Page header (lower pages) ---------- */
.crumbs-bar{border-bottom:1px solid var(--line-soft)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:var(--muted);padding:12px 0}
.crumbs[lang="en"]{font-family:var(--en),var(--serif);font-size:.92rem;font-weight:600;letter-spacing:.06em} /* English, like the menus */
.crumbs a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg);margin-right:10px}
.page-title{background:radial-gradient(ellipse at 50% 45%,rgba(92,64,30,0) 40%,rgba(92,64,30,.17) 100%), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27700%27 height=%27700%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.006%27 numOctaves=%273%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.119 -0.053%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/700px 700px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27300%27 height=%27300%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.05%27 numOctaves=%275%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.059 -0.027%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/300px 300px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 seed=%271%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.069 -0.031%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/220px 220px repeat, var(--bg-alt);border-bottom:3px double var(--line)}
/* Portfolio band: same aged-parchment texture and edge burn as the page-title band, framed by double rules */
.section#portfolio{background:radial-gradient(ellipse at 50% 45%,rgba(92,64,30,0) 40%,rgba(92,64,30,.17) 100%), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27700%27 height=%27700%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.006%27 numOctaves=%273%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.119 -0.053%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/700px 700px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27300%27 height=%27300%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.05%27 numOctaves=%275%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.059 -0.027%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/300px 300px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 seed=%271%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.361 0 0 0 0 0.251 0 0 0 0 0.118 0 0 0 0.069 -0.031%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/220px 220px repeat, var(--bg-alt);border-top:3px double var(--line);border-bottom:3px double var(--line)}
.page-title h1{font-family:var(--serif);font-size:clamp(1.5rem,3vw,1.9rem);font-weight:700;color:var(--navy);letter-spacing:.06em;padding:clamp(28px,4vw,44px) 0}

/* ---------- Company ---------- */
.catch{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.55rem);color:var(--navy);font-weight:500;letter-spacing:.06em;margin-bottom:18px}
.symbol{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,4vw,48px);align-items:center} /* seal sits level with the middle of the parts list */
.symbol figure{text-align:center}
.symbol img{width:180px;margin:0 auto;filter:saturate(.8);opacity:.92}
@media(min-width:961px){.symbol figure{transform:translateX(24px)}.symbol{column-gap:76px}} /* nudge the seal toward the parts list so it doesn't sit hard left */
.symbol figcaption{margin-top:16px}
/* Seal parts (right column): part | meaning + note, ruled like a ledger */
.seal-parts{margin:4px 0 0;border-top:1px solid var(--line-soft)}
.symbol-text{margin-top:clamp(28px,4vw,44px)} /* the values text runs the full width under the seal and its parts */
.seal-parts div{display:grid;grid-template-columns:11em 1fr;gap:4px 20px;align-items:baseline;padding:12px 0;border-bottom:1px dotted var(--line)}
.seal-parts dt{font-family:var(--en),var(--serif);font-size:.92rem;font-weight:600;letter-spacing:.06em;color:var(--navy)}
.seal-parts dd{color:var(--body)}
.seal-parts dd b{font-family:var(--serif);font-weight:700;color:var(--gold);margin-right:.8em}
/* Five names kept on one line */
.sym-ja{display:flex;justify-content:center;gap:.7em;white-space:nowrap;font-family:var(--serif);color:var(--navy);letter-spacing:.06em}
.symbol figcaption small{display:block;font-family:var(--sans);font-size:.76rem;color:var(--muted);letter-spacing:.02em;margin-top:2px}
.prose p+p{margin-top:1em}
.members{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.member{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;border:1px solid var(--line);padding:24px;background:var(--card)}
.member img{width:140px;aspect-ratio:4/5;object-fit:cover;background:var(--bg-alt);border:1px solid var(--line);border-bottom:3px solid var(--navy);border-radius:50% 50% 0 0/40% 40% 0 0;filter:sepia(.18) contrast(1.02)} /* arch from the symbol */
.member .role{font-size:.82rem;color:var(--muted)}
.member .name{font-family:var(--serif);font-size:1.3rem;color:var(--navy);font-weight:700;letter-spacing:.1em;margin-top:2px}
.member .name-en{font-size:.8rem;color:var(--muted);letter-spacing:.06em}
.member .credo{margin-top:12px;color:var(--ink)}
.outline{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.outline th,.outline td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--line)}
.outline th{width:180px;font-weight:700;color:var(--navy);background:var(--bg-alt)}
.outline-lead{margin:0 0 22px;line-height:1.9}
.outline .kana{display:block;font-size:.8rem;color:var(--muted)}

/* ---------- Business ---------- */
.spec{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);margin-top:28px}
.spec div{display:flex;border-right:1px solid var(--line)}
.spec div:last-child{border-right:0}
.spec dt{background:var(--bg-alt);padding:16px 20px;font-weight:700;color:var(--navy);min-width:110px}
.spec dd{padding:16px 20px}
.service+.service{margin-top:40px}
.service p{margin-top:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* Portfolio: client logos in their own colours, set in a row without frames */
.pf-grid{display:flex;flex-wrap:wrap;align-items:center;gap:24px 56px}
.pf{display:flex;align-items:center}
.pf img{height:28px;width:auto;max-width:100%}
/* Portfolio page: framed tiles; on hover the frame turns brass with a soft glow */
.pf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.pf-tags{margin-top:14px;font-size:.78rem;letter-spacing:.04em;color:var(--muted);line-height:1.7}
.pf-lead{margin-top:6px;font-size:.9rem;font-weight:600;color:var(--navy);line-height:1.7}
.pf-card{display:flex;align-items:center;justify-content:center;height:140px;padding:24px 32px;transition:border-color .3s,box-shadow .3s}
.pf-card img{max-height:34px;width:auto;max-width:85%}
.pf-card:hover,.pf-card:focus-visible{border-color:var(--gold);box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 5px rgba(160,120,52,.45),0 0 22px rgba(160,120,52,.35)}
/* Tags link to the glossary */
.tags a{display:block;font-size:.84rem;border:1px solid var(--line);background:var(--card);padding:4px 14px;color:var(--navy);transition:color .2s,border-color .2s}
.tags a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- Contact form ---------- */
.form{border-top:1px solid var(--line);max-width:860px}
.field{display:grid;grid-template-columns:240px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.field>label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;color:var(--ink);font-size:.92rem;padding-top:10px}
.req,.opt{font-size:.68rem;padding:1px 8px;font-weight:500}
.req{background:#B42318;color:#fff}
.opt{background:var(--muted);color:#fff}
.field input,.field textarea,.field select{width:100%;font:inherit;color:var(--ink);background:var(--card);border:1px solid #BFC5CE;padding:10px 12px;border-radius:2px}
.field textarea{min-height:180px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--navy);outline-offset:-1px}
.agree{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:28px;font-size:.92rem}
.agree input{width:18px;height:18px;accent-color:var(--navy)}
.agree a{text-decoration:underline;text-underline-offset:3px;color:var(--navy)}
.submit{text-align:center;margin-top:20px}
.submit .btn{min-width:240px}
.hp{position:absolute;left:-9999px}
.note{font-size:.86rem;color:var(--muted);margin-bottom:24px}

/* ---------- Two entrances (equity / debt) ---------- */
.gate{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--card);margin-top:8px}
.gate-fig{grid-column:1/-1;padding:28px 24px 0;text-align:center;border-bottom:1px solid var(--line)}
.gate-fig svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
.door{padding:24px 28px 28px}
.note-mark{font-size:.7em;vertical-align:super;margin-left:2px;color:var(--muted)}
.door-note{margin-top:12px;font-size:.78rem;line-height:1.7;color:var(--muted);padding-left:1.2em;text-indent:-1.2em}
.door+.door{border-left:1px solid var(--line)}
.door .door-name{font-weight:700;font-size:1.05rem;color:var(--navy)}
.door .door-name small{font-weight:500;font-size:.78rem;color:var(--muted);margin-left:6px}
.door.debt .door-name{color:var(--gold)}
.door ul{margin-top:12px}
.door li+li{margin-top:6px}

/* ---------- Ownership calculator (styled like a form on an old certificate) ---------- */
.calc{border:1px solid var(--line);background:var(--card);padding:32px clamp(18px,3.5vw,40px);margin-top:28px}
.calc-inputs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.calc-inputs>div{min-width:0;padding:18px 20px 12px}
.calc-inputs>div+div{border-left:1px solid var(--line-soft)}
.calc label{display:block;font-size:.78rem;letter-spacing:.12em;font-weight:600;color:var(--muted)}
/* Underlined fill-in field */
.calc .in{display:flex;align-items:baseline;gap:8px;margin-top:8px;border-bottom:1px solid var(--navy);transition:box-shadow .2s}
.calc .in:focus-within{box-shadow:0 1px 0 var(--gold);border-bottom-color:var(--gold)}
.calc input{flex:1;min-width:0;width:100%;font-size:1.55rem;color:var(--navy);background:transparent;border:0;padding:0 0 2px;text-align:right;font-variant-numeric:lining-nums tabular-nums}
.calc input:focus{outline:none}
.calc .unit{font-family:var(--serif);font-size:.95rem;color:var(--navy)}
.calc .in-read{font-family:var(--num),var(--serif-body);font-size:.9rem;letter-spacing:.04em;color:#7A5A22;text-align:right;margin-top:6px;min-height:1.5em}
/* Slider: hairline track, brass diamond as the thumb */
.mix-ctrl{margin-top:30px}
.mix-ctrl input[type=range]{--p:50%;-webkit-appearance:none;appearance:none;width:100%;height:28px;margin-top:4px;background:transparent;cursor:pointer}
.mix-ctrl input[type=range]:focus{outline:none}
.mix-ctrl input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--navy) 0 var(--p),var(--gold) var(--p) 100%)}
.mix-ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-6.5px;background:var(--gold);border:2px solid var(--card);box-shadow:0 0 0 1px var(--navy);transform:rotate(45deg)}
.mix-ctrl input[type=range]::-moz-range-track{height:2px;background:var(--gold)}
.mix-ctrl input[type=range]::-moz-range-progress{height:2px;background:var(--navy)}
.mix-ctrl input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:0;background:var(--gold);border:2px solid var(--card);box-shadow:0 0 0 1px var(--navy);transform:rotate(45deg)}
.mix-ctrl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--navy),0 0 0 4px rgba(160,120,52,.35)}
/* Track mirrors the bar: debt (brass) left of the thumb, equity (navy) right; each side labelled with its share */
.mix-hint{font-size:.84rem;color:var(--muted)}
.mix-scale{display:flex;justify-content:space-between;margin-top:10px;font-size:.95rem;font-weight:600;letter-spacing:.06em}
.mix-scale span{display:flex;align-items:baseline;gap:8px}
.mix-scale span::before{content:"";align-self:center;width:7px;height:7px;transform:rotate(45deg)}
.mix-scale .debt{flex-direction:row-reverse;color:var(--gold)}
.mix-scale .debt::before{background:var(--gold)}
.mix-scale .eq{color:var(--navy)}
.mix-scale .eq::before{background:var(--navy)}
.mix-scale b{font-family:var(--num);font-variant-numeric:lining-nums tabular-nums;font-size:1.4rem;font-weight:500}
.calc-out{margin-top:26px;display:grid;grid-template-columns:1fr 250px;gap:18px 40px;align-items:center}
/* Debt (brass) grows from the left, matching the slider; legend lists debt first in the same order */
.mix-bar{grid-column:1;display:flex;height:8px;background:var(--line-soft)}
.mix-bar span{display:block;height:100%;transition:width .3s}
.mix-bar .eq{background:var(--navy)}
.mix-bar .debt{background:var(--gold)}
/* Ledger rows with dotted leaders */
.mix-legend{grid-column:1;display:grid;gap:10px}
.mix-legend li{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}
.mix-legend .k{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.mix-legend .k::before{content:"";width:8px;height:8px;transform:rotate(45deg)}
.mix-legend .eq .k::before{background:var(--navy)}
.mix-legend .debt .k::before{background:var(--gold)}
.mix-legend .lead{flex:1;min-width:24px;border-bottom:1px dotted var(--line);transform:translateY(-5px)}
.mix-legend b{font-size:1.2rem;font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
.mix-legend small{flex-basis:100%;text-align:right;font-size:.76rem;color:var(--muted)}
/* Result framed by double rules, like the amount box on a certificate */
.result{grid-column:2;grid-row:1/3;text-align:center;padding:14px 10px 12px;border-top:3px double var(--navy);border-bottom:3px double var(--navy)}
.result-label{font-size:.78rem;letter-spacing:.14em;font-weight:600;color:var(--muted)}
.result-val{font-size:3.1rem;font-weight:500;color:var(--navy);line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums}
.result-ref{font-size:.76rem;color:var(--muted);margin-top:4px}
.result-ref span{font-family:var(--num);font-size:1.1em}
.calc-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--muted)}
.calc-foot .foot-ttl{font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:.08em;margin-bottom:6px}
.calc-note li{position:relative;padding-left:1em}
.calc-note li::before{content:"・";position:absolute;left:0}
.calc-err{margin-top:12px;font-size:.86rem;color:#B42318}

/* ---------- Glossary ---------- */
.g-group+.g-group{margin-top:48px}
.term{padding:24px 0;border-bottom:1px solid var(--line)}
.term:first-of-type{border-top:1px solid var(--line)}
.term .reading{font-size:.8rem;color:var(--muted);margin:4px 0 0 18px}
.term p{margin-top:10px}
.g-note{font-size:.84rem;color:var(--muted);margin-top:36px}

/* ---------- Privacy ---------- */
.policy{max-width:860px}
.policy h2{font-size:1.05rem;font-weight:700;color:var(--navy);margin-top:36px;padding-left:12px;border-left:4px solid var(--navy)}
.policy p,.policy ul{margin-top:12px}
.policy ul{padding-left:.2em}
.policy .date{margin-top:40px;text-align:right;color:var(--muted)}

/* ---------- Footer ---------- */
/* Same parchment + edge burn as the top band */
.site-footer{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(0,0,0,.48) 100%), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27700%27 height=%27700%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.006%27 numOctaves=%273%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0.034 -0.015%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/700px 700px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27300%27 height=%27300%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.05%27 numOctaves=%275%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0.017 -0.008%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/300px 300px repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 seed=%271%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0 1.000 0 0 0 0.020 -0.009%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0/220px 220px repeat, var(--navy);color:var(--on-navy-dim);font-size:.84rem;border-top:4px double var(--gold)}
.f-nav{display:flex;flex-wrap:wrap;gap:8px 28px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.f-nav a{color:rgba(255,255,255,.84)}
.f-nav a[lang="en"]{font-family:var(--en),var(--serif);font-size:.98rem;font-weight:600;letter-spacing:.08em}
.f-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.f-info{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:24px 0 28px}
.f-info .co{color:rgba(255,255,255,.84);font-weight:700;margin-bottom:4px}
.f-info .co .kana{display:block;font-size:.72rem;font-weight:400;letter-spacing:.08em;color:rgba(255,255,255,.6);margin-top:2px} /* katakana name, so searches in katakana find the site */
.f-copy{align-self:flex-end;font-size:.76rem}

/* ---------- Prototype badge ---------- */

/* =====================================================================
   Responsive — keep after base rules
   ===================================================================== */
/* Mid widths: tighten the spacing so the menu and the phone number both stay on one line */
@media(min-width:921px) and (max-width:1000px){.site-header .wrap{gap:12px}.gnav{gap:13px}.gnav a[lang="en"]:not(.nav-cta){letter-spacing:.04em}}
/* Header switches to the menu button only when even the menu runs out of room (~900px) */
@media(max-width:920px){
  .gnav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter);display:none}
  .menu-open .gnav{display:flex}
  .gnav a{padding:16px 4px;border-bottom:1px solid var(--line);font-size:1rem}
  .gnav a::after{display:none}
  .h-tel{align-items:flex-start;margin:20px 0 0;padding:0 4px}
  .gnav .nav-cta{margin-top:16px;text-align:center;border-bottom:0;padding:14px}
  .menu-btn{display:block}
}
@media(max-width:960px){
  .pf-cards{grid-template-columns:repeat(2,1fr)}
  .boxes,.members,.links3{grid-template-columns:1fr}
  .symbol{grid-template-columns:1fr}
  .seal-parts div{padding-left:20px} /* line the items up with the heading text, not the diamond */
  .contact-box{grid-template-columns:1fr}
  .calc-inputs{grid-template-columns:1fr}
  .calc-inputs>div+div{border-left:0;border-top:1px solid var(--line-soft)}
  .mv-mark{right:-60%;top:-4%;height:118%;opacity:.09}
}
@media(max-width:600px){
  .seal-parts div{grid-template-columns:1fr}
  .mv .wrap{padding-left:38px;padding-right:38px} /* keep text clear of the gold frame (inset 14px) */
  .pf-cards{grid-template-columns:1fr}
  body{font-size:14.5px}
  br.sp{display:inline}
  br.br-pc{display:none} /* PC-only breaks: let phones wrap naturally */
  .f-nav{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:10px 12px} /* footer menu in two rows of four */
  .f-nav a[lang="en"]{font-size:.9rem;letter-spacing:.04em}
  .member{grid-template-columns:110px 1fr;gap:16px;padding:16px}
  .member img{width:110px}
  .outline th,.outline td{display:block;width:100%}
  .outline th{padding:10px 14px}
  .outline td{padding:12px 14px 18px}
  .spec{grid-template-columns:1fr}
  .spec div{border-right:0;border-bottom:1px solid var(--line)}
  .spec div:last-child{border-bottom:0}
  .field{grid-template-columns:1fr;gap:8px}
  .field>label{justify-content:flex-start;padding-top:0}
  .contact-box .side{min-width:0}
  .btns .btn,.submit .btn{width:100%}
  .gate{grid-template-columns:1fr}
  .door+.door{border-left:0;border-top:1px solid var(--line)}
  .calc-out{grid-template-columns:1fr}
  .result{grid-column:1;grid-row:auto}
}
@media(max-width:350px){.f-nav{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:28px}} /* very narrow phones: two columns */
@media(max-width:380px){.mv h1{font-size:1.7rem}.mv .mv-en-gold{font-size:.88rem;letter-spacing:.04em}} /* narrow phones: keep each headline line and the English line whole */