/* critser.be — medical device regulatory consulting: clinical white, deep ink, one surgical-teal accent. */
:root{
  --ink:#0f2a3d;--ink-soft:#4a5d6b;--teal:#0b7a83;--teal-deep:#075a61;--teal-wash:#e6f3f4;
  --bg:#f4f7f9;--paper:#fff;--rule:#d9e1e6;--swing:#ff750f;
  --max:1140px;--serif:"Source Serif 4",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--teal-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0}
img{max-width:100%}

/* Header: white bar, thin rule */
header{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand::before{content:"";display:inline-block;width:10px;height:10px;background:var(--teal);border-radius:50%;margin-right:10px;vertical-align:1px}
nav{display:flex;gap:28px;font-size:.95rem;font-weight:500}
nav a{color:var(--ink-soft);text-decoration:none;white-space:nowrap}
nav a:hover{color:var(--teal-deep)}

/* Hero: text left, laboratory photo right with a figure card */
.hero{background:var(--paper);padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.hero .place{margin:0 0 18px;color:var(--teal-deep);font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.3rem);line-height:1.02}
.hero .lead{font-size:1.18rem;line-height:1.6;color:var(--ink-soft);max-width:32em;margin:24px 0 32px}
.tags{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--teal-deep);background:var(--teal-wash);border-radius:999px;padding:5px 12px}
.photo{margin:0;position:relative}
.photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;background:var(--rule)}
.hero .photo img{aspect-ratio:4/3.4}
.stat{position:absolute;left:-28px;bottom:28px;margin:0;background:var(--ink);color:#d7e3ea;border-radius:12px;padding:16px 20px;max-width:230px;font-size:.88rem;line-height:1.4;box-shadow:0 18px 40px rgba(15,42,61,.25)}
.stat b{display:block;font-family:var(--serif);font-size:2.4rem;line-height:1;color:#fff;margin-bottom:6px}

.btn{display:inline-block;font-weight:600;text-decoration:none;border-radius:8px;padding:13px 22px;font-size:.98rem}
.btn.cta{background:var(--teal);color:#fff}
.btn.cta:hover{background:var(--teal-deep);color:#fff}

section{padding:96px 0}
section h2{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:20px}

/* Services: heading and photo, then a grid of eight cards with line icons */
.services .head{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:center;margin-bottom:48px}
.services .head p{font-size:1.15rem;color:var(--ink-soft);max-width:30em;margin:0}
.services .photo img{aspect-ratio:3/2}
.acts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.acts li{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:24px 22px 22px;transition:border-color .2s,box-shadow .2s}
.acts li:hover{border-color:var(--teal);box-shadow:0 10px 28px rgba(15,42,61,.08)}
.acts svg{width:40px;height:40px;padding:8px;color:var(--teal-deep);background:var(--teal-wash);border-radius:10px;margin-bottom:16px}
.acts h3{font-size:1.18rem;margin-bottom:8px}
.acts p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.55}

/* Experience: dark ink band, photo left */
.exp{background:var(--ink);color:#d7e3ea}
.exp .wrap{display:grid;grid-template-columns:400px 1fr;gap:72px;align-items:center}
.exp h2{color:#fff}
.exp .photo img{aspect-ratio:4/5}
.exp .intro{font-size:1.1rem;margin:0 0 36px;max-width:36em}
.figs{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid rgba(255,255,255,.18);padding-top:24px}
.figs b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4vw,3.1rem);line-height:1;color:#fff;margin-bottom:8px}
.figs span{font-size:.9rem;color:#a9bccb}
.exp dl{display:grid;grid-template-columns:minmax(130px,170px) 1fr;margin:0}
.exp dl>div{display:contents}
.exp dt,.exp dd{padding:12px 0;border-top:1px solid rgba(255,255,255,.14);margin:0;font-size:.95rem}
.exp dt{color:#8fa6b6}
.exp dd{color:#fff}

/* Brand: Yetouse Studio, carrying its own colours */
.brands{background:var(--paper)}
.brandcard{display:grid;grid-template-columns:1.1fr 1fr;background:#0e2146;color:#fff;border-radius:14px;overflow:hidden}
.brandcard .duo{display:grid;grid-template-rows:1fr 1fr;gap:3px;min-height:420px}
.brandcard .duo figure{position:relative;margin:0;min-height:0}
.brandcard .duo picture{display:contents}
.brandcard img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.brandcard .duo>img{object-position:50% 60%}
.brandcard .duo figure img{object-position:50% 75%}
.brandcard figcaption{position:absolute;right:0;bottom:0;padding:4px 10px;background:rgba(14,33,70,.78);color:#cdd8ee;font-size:.75rem;font-style:italic;border-top-left-radius:6px}
.brandcard .txt{padding:40px 40px 36px}
.brandcard h3{font-family:var(--sans);font-weight:700;font-size:1.8rem;margin-bottom:14px}
.brandcard p{color:#cdd8ee;margin:0 0 26px}
.brandcard p a{color:#fff;text-decoration-color:var(--swing)}
.brandcard p a:hover{color:var(--swing)}
.brandcard .btn{margin:0 10px 10px 0}
.btn.swing{background:var(--swing);color:#0e2146}
.btn.swing:hover{background:#ff8a33;color:#0e2146}
.btn.outline{color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn.outline:hover{border-color:#fff;color:#fff}

/* Contact: call to action left, company plate right */
.contact{border-top:1px solid var(--rule)}
.contact .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.conf{color:var(--ink-soft);max-width:28em;margin:0 0 24px}
.mail{display:inline-block;font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--teal-deep);text-decoration:none;border-bottom:2px solid var(--teal-wash)}
.mail:hover{border-color:var(--teal);color:var(--teal-deep)}
.plate{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:12px 32px}
.plate dl{display:grid;grid-template-columns:minmax(150px,200px) 1fr;margin:0}
.plate dl>div{display:contents}
.plate dt,.plate dd{padding:13px 0;border-bottom:1px solid var(--rule);margin:0;font-size:.95rem}
.plate dt{color:var(--ink-soft)}
.plate dd{font-weight:500}
.plate div:last-child dt,.plate div:last-child dd{border-bottom:0}

footer{background:var(--ink);color:#a9bccb;padding:40px 0;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
footer nav{gap:20px;font-size:.9rem;font-weight:400}
footer a,footer nav a{color:#fff}

/* Documents: privacy, legal */
.doc{padding-top:72px;padding-bottom:96px}
.doc>*{max-width:44rem}
.doc h1{font-size:clamp(2.4rem,5vw,3.4rem);margin-bottom:16px}
.doc h2{font-size:1.45rem;margin:48px 0 10px}
.doc p,.doc li{color:#34414c}
.doc .updated{color:var(--ink-soft);font-size:.95rem;margin-top:0;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.doc .note{background:var(--paper);border-left:3px solid var(--teal);padding:10px 16px;font-size:.93rem;color:var(--ink-soft)}

/* Language menu: flag + code in the header, list of languages below */
header .tools{display:flex;align-items:center;gap:28px}
.lang{position:relative}
.lang summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;padding:6px 9px 6px 8px;border-radius:6px;border:1px solid var(--rule);font-weight:600;font-size:.82rem;color:var(--ink);line-height:1;letter-spacing:.02em}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:1px}
.lang[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.lang summary:hover,.lang[open] summary{border-color:var(--teal)}
.lang img{display:block;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--rule);border-radius:10px;box-shadow:0 12px 30px rgba(15,42,61,.18);min-width:180px;z-index:20}
.lang li a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.95rem}
.lang li a:hover{background:var(--bg);color:var(--ink)}
.lang li a[aria-current]{background:var(--teal-wash);font-weight:600}

/* Japanese: Noto Sans JP for kana/kanji, looser leading, phrase-aware line breaks */
html:lang(ja) body{font-family:"Inter","Noto Sans JP",system-ui,sans-serif;line-height:1.85;word-break:auto-phrase}
html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3{font-family:"Source Serif 4","Noto Sans JP",serif;font-weight:700;line-height:1.35}

@media (max-width:1000px){
  .acts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero .wrap,.services .head,.exp .wrap,.contact .wrap{grid-template-columns:1fr;gap:40px}
  .stat{left:16px;bottom:16px}
  .exp .photo img{aspect-ratio:16/10;object-position:50% 40%}
  .brandcard{grid-template-columns:1fr}
  .brandcard .duo{min-height:0;grid-template-rows:auto auto}
  .brandcard img{height:auto;aspect-ratio:16/9}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  header .wrap{height:60px}
  header nav{display:none}
  footer nav{display:flex;flex-wrap:wrap}
  .hero{padding:44px 0 56px}
  section{padding:64px 0}
  .acts{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr;gap:16px}
  .exp dl,.plate dl{grid-template-columns:1fr}
  .exp dt,.plate dt{padding-bottom:0;border-bottom:0}
  .exp dd{border-top:0;padding-top:2px}
  .brandcard .txt{padding:28px 22px}
  .plate{padding:8px 20px}
}