:root{
    --paper:#FAFAF7;
    --paper-2:#F2F1EB;
    --ink:#14171C;
    --ink-soft:#525862;
    --ink-faint:#8A8F98;
    --blueprint:#1B3A6B;
    --blueprint-tint:#E8EDF5;
    --blueprint-tint-2:#DCE4F0;
    --signal:#D65B2A;
    --signal-tint:#FBE9E0;
    --line:#DBDDD5;
    --line-strong:#C7CABF;
    --radius:2px;
    --display: 'Arial Narrow', Arial, Helvetica, sans-serif;
    --body: 'IBM Plex Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --maxw:1160px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:auto;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-0.01em;}
  h1,h2{font-size:40px;}
  @media (max-width:640px){h1,h2{font-size:28px;}}
  h1,h2{
    color:rgba(20,23,28,0.14);
    -webkit-text-fill-color:rgba(20,23,28,0.14);
    -webkit-text-stroke:1.3px var(--ink);
  }
  .cta-section h2{
    color:#FAFAF7;
    -webkit-text-fill-color:#FAFAF7;
    -webkit-text-stroke:0;
  }
  p{margin:0;}
  .mono{font-family:var(--mono);}

  :focus-visible{outline:2px solid var(--blueprint);outline-offset:2px;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  @media (max-width:640px){.wrap{padding:0 20px;}}

  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.10em;
    text-transform:uppercase;
    color:var(--blueprint);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow::before{
    content:"";
    width:16px;height:1px;background:var(--blueprint);display:inline-block;
  }

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .headerbar{
    display:flex;align-items:center;justify-content:space-between;
    height:104px;
  }
  .logo{
    display:flex;align-items:center;
  }
  .logo img{height:76px;width:auto;display:block;}
  .foot-about .logo img{height:68px;}

  nav.primary{display:flex;gap:32px;}
  nav.primary a{
    font-size:14px;color:var(--ink-soft);position:relative;padding:4px 0;
    line-height:1;
    transition:color .15s;
  }
  nav.primary a:hover{color:var(--ink);}
  nav.primary a.active{color:var(--ink);}
  nav.primary a.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blueprint);
  }
  @media (max-width:900px){nav.primary{display:none;}}

  .header-actions{display:flex;align-items:center;gap:16px;}

  .langtoggle{display:flex;}
  .langtoggle a{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:50%;
    border:1px solid var(--line-strong);
    font-family:var(--mono);font-size:12px;letter-spacing:.02em;
    color:var(--ink-soft);
    transition:background .15s,color .15s,border-color .15s;
  }
  .langtoggle a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-size:14px;font-weight:500;line-height:1;
    padding:11px 20px;border-radius:2px;border:1px solid transparent;
    white-space:nowrap;
    transition:transform .12s ease, background .15s, border-color .15s, color .15s;
  }
  .btn:active{transform:scale(0.98);}
  .btn-primary{background:var(--signal);color:#FFF6F1;}
  .btn-primary:hover{background:#C24E20;}
  .btn-ghost{border-color:var(--ink);color:var(--ink);}
  .btn-ghost:hover{background:var(--ink);color:var(--paper);}
  .btn-arrow::after{content:"→";transition:transform .15s;}
  .btn-arrow:hover::after{transform:translateX(3px);}

  @media (max-width:640px){
    .header-actions .btn-ghost{display:none;}
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:96px 0 80px;
    background:
      linear-gradient(var(--paper), var(--paper)),
      repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line) 40px);
    background-blend-mode:normal;
    overflow:hidden;
  }
  .hero::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 60% 50% at 78% 20%, rgba(27,58,107,0.07), transparent 70%);
    pointer-events:none;
  }
  .hero-grid{
    display:grid;grid-template-columns:0.9fr 1.2fr;gap:56px;align-items:stretch;position:relative;
  }
  @media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:48px;align-items:start;}}

  .hero h1{margin:18px 0 22px;max-width:15ch;}
  .hero p.lead{font-size:17px;color:var(--ink-soft);max-width:46ch;margin-bottom:32px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}

  .hero-visual{position:relative;border:1px solid var(--line);background:#F9F8F5;min-height:360px;}
  @media (max-width:960px){.hero-visual{aspect-ratio:4/3.1;min-height:0;}}
  @media (max-width:640px){.hero-visual{display:none;}}
  @media (max-width:640px){.hero{padding:32px 0 48px;}}
  .dimline{position:absolute;font-family:var(--mono);font-size:11px;color:var(--blueprint);}
  .dimline .val{font-weight:500;}

  .hero-slides{position:absolute;inset:0;display:flex;flex-direction:column;}
  .hero-slide{
    position:absolute;inset:0;margin:0;
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transition:opacity .7s ease;
  }
  .hero-slide.active{opacity:1;visibility:visible;}
  .hero-slide > img{
    flex:1;min-height:0;width:100%;object-fit:contain;padding:22px;
  }
  .hero-slide figcaption{
    flex-shrink:0;padding:10px 16px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:11px;color:var(--ink-faint);
    text-transform:uppercase;letter-spacing:.06em;
  }
  .hero-dots{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:2;}
  .hero-dot{
    width:7px;height:7px;padding:0;border-radius:50%;
    border:1px solid var(--line-strong);background:#fff;cursor:pointer;
  }
  .hero-dot.active{background:var(--blueprint);border-color:var(--blueprint);}
  @media (prefers-reduced-motion: reduce){.hero-slide{transition:none;}}

  /* ---------- service picker ---------- */
  .section{padding-top:88px;padding-bottom:88px;}
  .section-tight{padding-top:56px;padding-bottom:56px;}
  @media (max-width:640px){
    .section{padding-top:48px;padding-bottom:48px;}
    .section-tight{padding-top:36px;padding-bottom:36px;}
  }
  .section-head{max-width:640px;margin-bottom:44px;}
  .section-head h2{margin-top:14px;}
  .section-head p{color:var(--ink-soft);margin-top:14px;font-size:15.5px;}

  .picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);}
  @media (max-width:900px){.picker-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.picker-grid{grid-template-columns:1fr;}}
  .picker-card{
    background:var(--paper);padding:28px 24px;
    display:flex;flex-direction:column;gap:10px;
    transition:background .15s;
  }
  .picker-card:hover{background:var(--blueprint-tint);}
  .picker-num{font-family:var(--mono);font-size:12px;color:var(--ink-faint);}
  .picker-card h3{font-size:18px;font-weight:600;}
  .picker-card p{font-size:13.5px;color:var(--ink-soft);}
  .picker-card .go{margin-top:auto;font-size:13px;font-weight:500;color:var(--blueprint);display:flex;align-items:center;gap:6px;}

  /* ---------- stats ---------- */
  .stats{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--paper-2);
  }
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);}
  @media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);}}
  .stat{
    padding:30px 24px;border-left:1px solid var(--line);
  }
  .stat:first-child{border-left:none;}
  @media (max-width:760px){
    .stat:nth-child(odd){border-left:none;}
    .stat:nth-child(n+3){border-top:1px solid var(--line);}
  }
  .stat .num{font-family:var(--display);font-weight:700;font-size:28px;color:var(--blueprint);}
  .stat .lab{font-size:13px;color:var(--ink-soft);margin-top:4px;}
  @media (max-width:640px){.stat .num{font-size:13px;}}

  /* ---------- services ---------- */
  /* 3-per-row grid where each card is a subgrid: the icon/title/description
     tracks are shared across a visual row, so the dashed divider always sits
     at the same height — driven by the row's longest description, with
     shorter cards simply getting more room above the dash, not below it. */
  .services-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2, auto auto auto auto);
    gap:1px;background:var(--line);
  }
  .service-card{
    display:grid;grid-template-rows:subgrid;grid-row:span 4;
    background:var(--paper);padding:30px 26px;min-height:210px;
  }
  .service-card:nth-child(1){grid-column:1;grid-row:1/span 4;}
  .service-card:nth-child(2){grid-column:2;grid-row:1/span 4;}
  .service-card:nth-child(3){grid-column:3;grid-row:1/span 4;}
  .service-card:nth-child(4){grid-column:1;grid-row:5/span 4;}
  .service-card:nth-child(5){grid-column:2;grid-row:5/span 4;}
  .service-card:nth-child(6){grid-column:3;grid-row:5/span 4;}
  .service-icon{width:34px;height:34px;margin-bottom:18px;color:var(--blueprint);align-self:start;}
  .service-card h3{font-size:18px;margin-bottom:10px;align-self:start;}
  .service-card p{font-size:13.5px;color:var(--ink-soft);align-self:start;}
  .service-out{
    align-self:start;
    margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-strong);
    font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);
  }
  @media (max-width:860px){
    .services-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3, auto auto auto auto);}
    .service-card:nth-child(1){grid-column:1;grid-row:1/span 4;}
    .service-card:nth-child(2){grid-column:2;grid-row:1/span 4;}
    .service-card:nth-child(3){grid-column:1;grid-row:5/span 4;}
    .service-card:nth-child(4){grid-column:2;grid-row:5/span 4;}
    .service-card:nth-child(5){grid-column:1;grid-row:9/span 4;}
    .service-card:nth-child(6){grid-column:2;grid-row:9/span 4;}
  }
  @media (max-width:560px){
    .services-grid{grid-template-columns:1fr;grid-template-rows:none;}
    .service-card{display:flex;flex-direction:column;grid-column:auto;grid-row:auto;}
    .service-card:nth-child(1),.service-card:nth-child(2),.service-card:nth-child(3),
    .service-card:nth-child(4),.service-card:nth-child(5),.service-card:nth-child(6){
      grid-column:auto;grid-row:auto;
    }
    .service-card p{flex:1;}
  }
  .service-out b{color:var(--ink-soft);font-weight:500;}

  /* ---------- process ---------- */
  .process{position:relative;}
  .process-box{
    background:var(--paper-2);border:1px solid var(--line);border-radius:2px;
    padding:40px 36px;
  }
  @media (max-width:640px){.process-box{padding:32px 24px;}}
  .process-track{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;
  }
  @media (max-width:760px){.process-track{grid-template-columns:1fr;gap:28px;}}
  .process-track::before{
    content:"";position:absolute;top:19px;left:6%;right:6%;height:1px;
    background:repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
  }
  @media (max-width:760px){.process-track::before{display:none;}}
  .process-step{position:relative;padding-right:20px;}
  .process-step .idx{
    width:40px;height:40px;border-radius:50%;background:var(--paper);border:1.5px solid var(--blueprint);
    color:var(--blueprint);font-family:var(--mono);font-size:14px;font-weight:500;
    display:flex;align-items:center;justify-content:center;position:relative;z-index:2;margin-bottom:18px;
  }
  .process-step h3{font-size:18px;margin-bottom:8px;}
  .process-step p{font-size:13.5px;color:var(--ink-soft);}

  /* ---------- gallery ---------- */
  .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media (max-width:860px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}}
  .gallery-grid-4{grid-template-columns:repeat(2,1fr);}
  @media (max-width:700px){.gallery-grid-4{grid-template-columns:1fr;}}
  .gallery-note{
    display:inline-block;margin-top:24px;padding:10px 16px;
    background:#F9F8F5;border-radius:var(--radius);
    font-size:13px;color:var(--ink-faint);font-family:var(--mono);
  }
  .gthumb.gthumb-sheet{aspect-ratio:1.4142/1;background:var(--paper-2);}
  .gthumb-sheet img{width:100%;height:100%;object-fit:contain;display:block;}
  .gcard{border:1px solid var(--line);background:var(--paper);}
  .gthumb{aspect-ratio:4/3;background:var(--blueprint-tint);position:relative;overflow:hidden;cursor:zoom-in;}
  .gthumb:hover svg,.gthumb:hover img{opacity:0.88;}

  .lightbox{
    position:fixed;inset:0;z-index:200;
    background:rgba(20,23,28,0.92);
    display:none;align-items:center;justify-content:center;flex-direction:column;
    padding:40px;cursor:zoom-out;
  }
  .lightbox.active{display:flex;}
  .lightbox-inner{
    max-width:96vw;max-height:82vh;width:100%;
    background:var(--paper);padding:16px;box-sizing:border-box;cursor:default;
    display:flex;align-items:center;justify-content:center;
  }
  .lightbox-inner svg,.lightbox-inner img{width:100%;height:auto;max-height:calc(82vh - 32px);display:block;object-fit:contain;}
  .lightbox-caption{margin-top:18px;color:#F2F1EB;font-family:var(--mono);font-size:13px;text-align:center;}
  .lightbox-close{
    position:absolute;top:22px;right:28px;
    width:40px;height:40px;border:1px solid rgba(255,255,255,0.35);border-radius:50%;
    background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .lightbox-close:hover{background:rgba(255,255,255,0.1);}
  @media (max-width:640px){
    .lightbox{padding:20px;}
    .lightbox-close{top:12px;right:12px;width:36px;height:36px;}
  }
  .gthumb svg{width:100%;height:100%;}
  .gmeta{padding:16px 18px;}
  .gmeta h3{font-size:18px;font-weight:600;margin-bottom:4px;}
  .gmeta p{font-size:12.5px;color:var(--ink-soft);}
  .gplaceholder-tag{
    position:absolute;top:10px;left:10px;background:var(--paper);border:1px solid var(--line-strong);
    font-family:var(--mono);font-size:10px;padding:3px 8px;color:var(--ink-faint);letter-spacing:.03em;text-transform:uppercase;
  }

  /* ---------- cases ---------- */
  .cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);}
  @media (max-width:860px){.cases-grid{grid-template-columns:1fr;}}
  .case-card{background:var(--paper);padding:26px;display:flex;flex-direction:column;min-height:230px;}
  .case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
  .case-tag{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--blueprint);background:var(--blueprint-tint);padding:3px 8px;}
  .case-card h3{font-size:18px;margin-bottom:10px;}
  .case-card p{font-size:13px;color:var(--ink-soft);flex:1;}
  .case-status{margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);border-top:1px dashed var(--line-strong);padding-top:12px;}
  .case-pdf-row{display:flex;align-items:stretch;gap:10px;margin-top:16px;}
  .case-pdf{flex:1;min-width:0;aspect-ratio:1.4142/1;border:1px solid var(--line);background:var(--paper-2);}
  .case-pdf iframe{width:100%;height:100%;border:0;display:block;}
  .case-scroll-hint{flex:none;width:16px;display:flex;flex-direction:column;align-items:center;color:var(--blueprint);opacity:.6;}
  .case-scroll-hint svg{width:12px;flex:none;}
  .case-scroll-hint .case-scroll-line{flex:1;width:1px;min-height:16px;background:currentColor;margin:2px 0;}
  .case-pdf-mobile{display:none;}
  @media (max-width:860px){
    .case-pdf-row{display:none;}
    .case-pdf-mobile{
      display:block;margin-top:16px;aspect-ratio:1.4142/1;
      border:1px solid var(--line);background:var(--paper-2);overflow:hidden;
    }
    .case-pdf-mobile.case-pdf-mobile--portrait{aspect-ratio:0.7071/1;}
    .case-pdf-mobile img{width:100%;height:100%;object-fit:contain;display:block;}
  }
  .case-pdf-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--blueprint);}
  .case-pdf-link:hover{color:var(--ink);}

  /* ---------- blog ---------- */
  .blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  @media (max-width:760px){.blog-grid{grid-template-columns:1fr;}}
  .blog-card{border:1px solid var(--line);background:#F9F8F5;padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .12s;}
  .blog-card:hover{border-color:var(--line-strong);transform:translateY(-2px);}
  .blog-date{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);}
  .blog-card h3{font-size:18px;}
  .blog-card p{font-size:13.5px;color:var(--ink-soft);}
  .blog-read{font-size:13px;font-weight:500;color:var(--blueprint);margin-top:auto;padding-top:6px;}

  /* ---------- CTA / contact ---------- */
  .cta-section{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;}
  .cta-section::before{
    content:"";position:absolute;inset:0;
    background-image:repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.05) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.05) 40px);
  }
  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;position:relative;}
  @media (max-width:900px){.cta-grid{grid-template-columns:1fr;}}
  .cta-section h2{color:#FAFAF7;-webkit-text-fill-color:#FAFAF7;-webkit-text-stroke:0;max-width:14ch;}
  .cta-section .lead{color:#C7CBD3;font-size:15.5px;margin-top:16px;max-width:44ch;}
  .cta-points{margin-top:32px;display:flex;flex-direction:column;gap:18px;}
  .cta-point{display:flex;gap:14px;}
  .cta-point .dot{width:8px;height:8px;border:1px solid var(--signal);flex:none;margin-top:6px;transform:rotate(45deg);}
  .cta-point h4{font-size:14.5px;color:#FAFAF7;font-weight:500;margin-bottom:3px;}
  .cta-point p{font-size:13px;color:#9BA1AC;}

  .form-card{background:var(--paper);color:var(--ink);padding:32px;border:1px solid #2A2E36;}
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;font-family:var(--mono);letter-spacing:.02em;}
  .field input,.field textarea{
    width:100%;border:1px solid var(--line-strong);background:var(--paper);padding:11px 12px;font-size:14px;font-family:var(--body);color:var(--ink);border-radius:2px;
  }
  .field input:focus,.field textarea:focus{border-color:var(--blueprint);}
  .field textarea{resize:vertical;min-height:88px;}
  .consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 20px;}
  .consent input{margin-top:3px;flex:none;}
  .consent label{font-size:12px;color:var(--ink-faint);line-height:1.5;}
  .consent a{color:var(--blueprint);text-decoration:underline;}
  .form-submit{width:100%;justify-content:center;}
  .form-status{font-size:13px;margin-top:12px;display:none;padding:10px 12px;border-radius:2px;}
  .form-status.ok{display:block;background:#E9F2EA;color:#2A5C36;}
  .form-status.err{display:block;background:var(--signal-tint);color:#8A3A18;}

  /* ---------- footer ---------- */
  footer{background:var(--paper-2);border-top:1px solid var(--line);padding:64px 0 32px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
  @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:480px){.foot-grid{grid-template-columns:1fr;}}
  .foot-grid h4{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:16px;}
  .foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .foot-grid a{font-size:13.5px;color:var(--ink-soft);}
  .foot-grid a:hover{color:var(--ink);}
  .foot-about p{font-size:13.5px;color:var(--ink-soft);max-width:34ch;margin-top:14px;}
  .foot-bottom{
    margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    font-size:12.5px;color:var(--ink-faint);
  }
  .foot-bottom a{text-decoration:underline;}

  .todo{outline:1px dashed var(--signal);outline-offset:3px;}
  .todo-flag{
    font-family:var(--mono);font-size:9.5px;color:var(--signal);background:var(--signal-tint);
    padding:1px 5px;margin-left:6px;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle;
  }

  section[id], main#top{
    scroll-margin-top:104px;
  }

  .plan-watermark{
    position:fixed;
    top:0;left:0;right:0;
    height:340vh;
    pointer-events:none;
    z-index:-1;
    opacity:0.055;
    will-change:transform;
    background-image:url("assets/watermark.png");
    background-repeat:repeat;
    background-size:1668px 2000px;
  }
  @media (max-width:640px){.plan-watermark{height:600vh;}}

  ::selection{background:var(--blueprint);color:#fff;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;animation:none !important;}
  }

  /* ---------- article (blog post) ---------- */
  .article-hero{padding:56px 0 40px;border-bottom:1px solid var(--line);}
  .article-hero .wrap{max-width:760px;}
  .article-back{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;}
  .article-back:hover{color:var(--ink);}
  .article-hero h1{-webkit-text-stroke:1.3px var(--ink);font-size:34px;margin-top:14px;margin-bottom:16px;}
  @media (max-width:640px){.article-hero h1{font-size:26px;}}
  .article-meta{font-family:var(--mono);font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;}
  .article-body{padding:48px 0 88px;}
  .article-body .wrap{max-width:760px;}
  .article-body h2{-webkit-text-fill-color:var(--ink);-webkit-text-stroke:0;font-size:24px;margin:40px 0 14px;}
  .article-body h2:first-child{margin-top:0;}
  .article-body p{font-size:16px;color:var(--ink-soft);margin-bottom:16px;}
  .article-body ul,.article-body ol{margin:0 0 16px;padding-left:22px;color:var(--ink-soft);}
  .article-body li{margin-bottom:8px;}
  .article-body strong{color:var(--ink);}
  .article-cta{margin-top:48px;padding:28px;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;}
  .article-cta p{color:var(--ink);margin:0;font-weight:500;}

  /* ---------- bio widget ---------- */
  .bio-widget{
    position:fixed;top:120px;right:24px;z-index:60;
    width:280px;max-width:calc(100vw - 32px);
    background:var(--paper);border:1px solid var(--line-strong);
    border-top:3px solid var(--blueprint);
    box-shadow:0 12px 28px rgba(20,23,28,0.10);
    opacity:1;
    transition:width .32s cubic-bezier(.4,0,.2,1),opacity .4s ease;
  }
  @media (max-width:640px){
    .bio-widget{top:calc(var(--header-bottom, 105px) + 44px);right:0;width:240px;border-top:1px solid var(--line-strong);}
  }
  .bio-widget.dimmed{opacity:.5;}
  .bio-widget.instant-opacity{transition:width .32s cubic-bezier(.4,0,.2,1);}
  .bio-widget.collapsed{width:44px;}
  .bio-widget-bar{
    position:relative;display:flex;align-items:center;min-height:44px;
    padding:0 44px 0 14px;
    transition:padding .32s cubic-bezier(.4,0,.2,1);
  }
  .bio-widget.collapsed .bio-widget-bar{padding:0;height:41px;min-height:0;}
  .bio-widget-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-faint);white-space:nowrap;overflow:hidden;}
  .bio-widget.collapsed .bio-widget-label{display:none;}
  .bio-widget-toggle{
    position:absolute;top:50%;right:8px;transform:translateY(-50%);
    width:26px;height:26px;border:none;background:none;cursor:pointer;
    font-size:0;line-height:1;color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    transition:background .15s,color .15s;
  }
  .bio-widget-toggle::before{content:"×";font-size:19px;}
  .bio-widget.collapsed .bio-widget-toggle::before{content:"?";font-size:16px;font-weight:600;}
  .bio-widget-toggle:hover{background:var(--blueprint-tint);color:var(--ink);}
  .bio-widget-body{
    display:grid;grid-template-rows:1fr;
    transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);
  }
  .bio-widget.collapsed .bio-widget-body{grid-template-rows:0fr;}
  .bio-widget-body-clip{overflow:hidden;min-height:0;}
  .bio-widget-body-inner{
    padding:14px 16px 18px;border-top:1px solid var(--line);
    opacity:1;transition:opacity .3s ease .1s,border-color .3s ease .1s;
  }
  .bio-widget.collapsed .bio-widget-body-inner{opacity:0;border-top-color:transparent;transition:opacity .3s ease,border-color .3s ease;}
  .bio-widget-photo{width:52px;height:52px;border-radius:50%;background:var(--blueprint-tint);margin-bottom:12px;object-fit:cover;display:block;}
  .bio-widget-name{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:2px;white-space:nowrap;}
  .bio-widget-role{font-family:var(--mono);font-size:11px;color:var(--blueprint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
  .bio-widget-text{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}
  @media (prefers-reduced-motion: reduce){
    .bio-widget,.bio-widget-toggle,.bio-widget-body,.bio-widget-body-inner{transition:none;}
  }
  /* mobile keeps a single, simple opacity fade instead of the desktop's
     multi-part width/padding/grid-row choreography, which reads as janky
     on a small screen. */
  @media (max-width:640px){
    .bio-widget{transition:opacity .2s ease;}
    .bio-widget.instant-opacity{transition:none;}
    .bio-widget-bar,.bio-widget-toggle,.bio-widget-body,.bio-widget-body-inner{transition:none;}
    /* Safari has been seen rendering the body's grid-template-rows collapse
       at the wrong (huge) height right after the widget's own width also
       changes in the same tick. A plain display toggle sidesteps that
       intrinsic-sizing computation entirely. */
    .bio-widget.collapsed .bio-widget-body{display:none;}
    /* the widget's border is 1px all round on mobile (vs. a 3px accent
       top border on desktop) — shrink the bar to compensate so the
       collapsed square still comes out to exactly 44px. */
    .bio-widget.collapsed .bio-widget-bar{height:42px;}
  }

  /* ---------- mobile nav menu widget ---------- */
  /* Mirrors the bio-widget's structure exactly: one box that grows in
     place (button included) rather than a fixed button plus a separate
     panel appearing next to it — so it visibly unfolds from the button. */
  .navmenu-widget{
    display:none;position:fixed;top:120px;left:24px;z-index:60;
    width:44px;
    background:var(--paper);border:1px solid var(--line-strong);
    border-top:3px solid var(--blueprint);
    box-shadow:0 12px 28px rgba(20,23,28,0.10);
    opacity:1;
    transition:width .32s cubic-bezier(.4,0,.2,1),opacity .4s ease;
  }
  @media (max-width:900px){.navmenu-widget{display:block;}}
  @media (max-width:640px){
    .navmenu-widget{top:var(--header-bottom, 105px);left:auto;right:0;border-top:1px solid var(--line-strong);}
    /* the widget is anchored by its right edge and grows leftward on
       mobile, so the icon (a fixed 44px block) must stick to that same
       right edge — otherwise it visibly slides left as the box widens. */
    .navmenu-bar{margin-left:auto;}
    .navmenu-widget.open{z-index:61;}
  }
  .navmenu-widget.open{width:220px;max-width:calc(100vw - 32px);}
  .navmenu-widget.dimmed{opacity:.5;}
  .navmenu-widget.instant-opacity{transition:width .32s cubic-bezier(.4,0,.2,1);}
  .navmenu-bar{width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
  .navmenu-toggle{
    width:44px;height:44px;border:none;background:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .navmenu-toggle-icon{
    display:flex;flex-direction:column;gap:5px;
    transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .navmenu-widget.open .navmenu-toggle-icon{transform:rotate(90deg);}
  .navmenu-icon-bar{width:18px;height:2px;background:var(--ink-soft);}
  .navmenu-body{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);
  }
  .navmenu-widget.open .navmenu-body{grid-template-rows:1fr;}
  .navmenu-body-clip{overflow:hidden;min-height:0;}
  .navmenu-panel{
    display:flex;flex-direction:column;border-top:1px solid var(--line);
    opacity:0;transition:opacity .2s ease;
  }
  .navmenu-widget.open .navmenu-panel{opacity:1;transition:opacity .25s ease .12s;}
  .navmenu-panel a{
    padding:12px 16px;font-size:14px;color:var(--ink-soft);border-bottom:1px solid var(--line);
    transition:color .15s,background .15s;
  }
  .navmenu-panel a:last-child{border-bottom:none;}
  .navmenu-panel a:hover{color:var(--ink);background:var(--blueprint-tint);}
  @media (prefers-reduced-motion: reduce){
    .navmenu-widget,.navmenu-toggle-icon,.navmenu-body,.navmenu-panel{transition:none;}
  }
  /* mobile: same simplification as the bio widget — a plain opacity fade,
     with the body hidden via display rather than an animated grid-row
     collapse happening in the same tick as the width change. */
  @media (max-width:640px){
    .navmenu-widget{transition:opacity .2s ease;}
    .navmenu-widget.instant-opacity{transition:none;}
    .navmenu-toggle-icon,.navmenu-body,.navmenu-panel{transition:none;}
    .navmenu-widget:not(.open) .navmenu-body{display:none;}
    /* the widget's own top+bottom borders are 1px each on mobile (vs. a
       3px accent border on desktop) — shrink the bar to compensate so the
       whole collapsed square still comes out to exactly 44px. */
    .navmenu-bar{height:42px;}
  }

  /* ---------- chat widgets (whatsapp / telegram) ---------- */
  .chat-stack{position:fixed;bottom:24px;right:24px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
  @media (max-width:640px){.chat-stack{bottom:16px;right:16px;}}
  #waWidget{--brand:#25D366;--brand-hover:#1EBE5A;}
  #tgWidget{--brand:#229ED9;--brand-hover:#1B87C9;}
  .chat-widget{display:flex;flex-direction:column;align-items:flex-end;}
  .chat-panel-wrap{
    display:grid;grid-template-rows:0fr;width:304px;max-width:calc(100vw - 32px);
    margin-bottom:14px;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);
  }
  .chat-widget.open .chat-panel-wrap{grid-template-rows:1fr;}
  .chat-panel-clip{overflow:hidden;min-height:0;}
  .chat-panel{
    background:var(--paper);border:1px solid var(--line-strong);border-top:3px solid var(--brand);
    box-shadow:0 12px 28px rgba(20,23,28,0.16);
    opacity:0;transition:opacity .2s ease;
  }
  .chat-widget.open .chat-panel{opacity:1;transition:opacity .25s ease .12s;}
  .chat-panel-head{display:flex;align-items:center;gap:10px;padding:14px 12px 12px 14px;}
  .chat-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;}
  .chat-avatar svg{width:18px;height:18px;}
  .chat-panel-name{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink);}
  .chat-panel-status{font-size:11px;color:var(--ink-faint);margin-top:1px;}
  .chat-panel-close{margin-left:auto;flex:none;width:26px;height:26px;border:none;background:none;color:var(--ink-faint);font-size:18px;line-height:1;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
  .chat-panel-close:hover{background:var(--blueprint-tint);color:var(--ink);}
  .chat-panel-body{padding:6px 14px 14px;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .chat-bubble{margin-top:12px;background:var(--paper);border:1px solid var(--line);border-radius:10px 10px 10px 2px;padding:10px 12px;font-size:13px;color:var(--ink-soft);line-height:1.5;max-width:88%;}
  .chat-panel-form{display:flex;gap:8px;padding:12px 14px;}
  .chat-panel-form input{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:2px;padding:9px 10px;font-size:13px;font-family:var(--body);color:var(--ink);background:var(--paper);}
  .chat-panel-form input:focus{outline:none;border-color:var(--blueprint);}
  .chat-panel-form button{flex:none;width:38px;height:38px;border-radius:50%;border:none;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;}
  .chat-panel-form button:hover{background:var(--brand-hover);}
  .chat-panel-form button svg{width:17px;height:17px;}
  .chat-fab{
    flex:none;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
    background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 24px rgba(20,23,28,0.22);transition:transform .2s ease,box-shadow .2s ease;
  }
  .chat-fab:hover{transform:scale(1.06);box-shadow:0 14px 30px rgba(20,23,28,0.28);}
  .chat-fab svg{width:26px;height:26px;}
  @media (prefers-reduced-motion: reduce){.chat-panel-wrap,.chat-panel{transition:none;}}