/*
Theme Name: ENKAI
Theme URI: https://enkai.sk
Author: Nestify s.r.o.
Description: Performance & Creative Marketing Agency theme.
Version: 1.0.5
Requires PHP: 7.4
License: Proprietary
Text Domain: enkai
*/


  /* ====================================================================
     ENKAI DESIGN SYSTEM v2 — Swiss grotesque, off-white, black, orange
     ==================================================================== */

  :root{
    --bg:        #F2EFE9;   /* warm off-white */
    --bg-2:      #E9E4D9;   /* slightly deeper */
    --ink:       #0A0A0A;   /* near-black */
    --ink-2:     #1A1A1A;
    --orange:    #FF4A1C;   /* vivid orange — primary accent */
    --orange-2:  #E63812;
    --line:      rgba(10,10,10,0.12);
    --line-2:    rgba(10,10,10,0.20);
    --muted:     rgba(10,10,10,0.58);
    --muted-2:   rgba(10,10,10,0.42);
    --on-dark:   #F2EFE9;
    --line-d:    rgba(242,239,233,0.14);
    --muted-d:   rgba(242,239,233,0.60);

    --f-sans: 'Geist', 'Helvetica Neue', 'Inter', system-ui, -apple-system, sans-serif;
    --f-mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
    --f-serif: 'Instrument Serif', 'Times New Roman', serif;

    --pad-x: clamp(20px, 4vw, 64px);
    --section-pad: clamp(72px, 9vw, 140px);

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 18px;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  html{ -webkit-text-size-adjust: 100%; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  img{ display:block; max-width:100%; }
  a{ color: inherit; text-decoration: none; }
  button{ font: inherit; cursor: pointer; }
  ::selection{ background: var(--orange); color: #fff; }

  /* ========================= TYPE SCALE ========================= */

  .h-display{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(56px, 11vw, 196px);
    line-height: 0.92;
    letter-spacing: -0.045em;
  }
  .h-display em{
    font-style: italic;
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  h1,h2,h3,h4{
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.0;
  }
  h2{ font-size: clamp(40px, 5.6vw, 88px); }
  h3{ font-size: clamp(24px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -0.025em;}
  p{ margin: 0; }

  .eyebrow{
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .eyebrow::before{
    content: '';
    display:inline-block;
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
  }
  .eyebrow.on-dark{ color: var(--on-dark); }

  .mono{ font-family: var(--f-mono); }
  .lead{ font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: var(--ink); }
  .muted{ color: var(--muted); }
  .small{ font-size: 13px; line-height: 1.5; }

  /* ========================= BUTTONS ========================= */

  .btn{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 22px 0 26px;
    border-radius: 100px;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn .arrow{
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: inline-grid; place-items: center;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .btn .arrow svg{ width: 12px; height: 12px; stroke: currentColor; }
  .btn:hover .arrow{ transform: translate(3px, -3px); }
  .btn:hover{ transform: translateY(-1px); }

  .btn-dark{ background: var(--ink); color: var(--on-dark); }
  .btn-dark .arrow{ background: var(--orange); color: #fff; }
  .btn-dark:hover{ background: var(--ink-2); }

  .btn-light{ background: var(--bg); color: var(--ink); border-color: var(--line); }
  .btn-light .arrow{ background: var(--ink); color: var(--on-dark); }

  .btn-orange{ background: var(--orange); color: #fff; }
  .btn-orange .arrow{ background: rgba(0,0,0,0.18); color: #fff; }

  .btn-ghost{
    background: transparent;
    border-color: var(--line-2);
    color: var(--ink);
  }
  .btn-ghost .arrow{ background: var(--ink); color: var(--on-dark); }

  .btn-ghost.on-dark{ border-color: var(--line-d); color: var(--on-dark); }
  .btn-ghost.on-dark .arrow{ background: var(--orange); color: #fff; }

  /* ========================= HEADER ========================= */

  .top{
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .top-row{
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    padding: 14px var(--pad-x);
    max-width: 1680px; margin: 0 auto;
  }
  .brand{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--f-sans);
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
  }
  .brand-mark{
    width: 38px; height: 38px;
    border-radius: 9px;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
  }
  .brand-word{
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.035em;
    line-height: 1;
  }
  .brand-dark{ color: var(--on-dark); }
  .brand-dark .brand-mark{ box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
  .nav{
    display: flex; gap: 4px;
    align-items: center;
  }
  .nav a{
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 100px;
    color: var(--ink);
    transition: background .2s, color .2s;
  }
  .nav a:hover{ background: rgba(10,10,10,0.06); }
  .nav a.active{ background: var(--ink); color: var(--on-dark); }
  .top-right{ display: flex; align-items: center; gap: 14px; }
  .lang-toggle{
    display: inline-flex; gap: 4px;
    font-family: var(--f-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
  }
  .lang-toggle b{ color: var(--ink); font-weight: 500; }
  .top .btn{ height: 40px; padding: 0 18px 0 20px; font-size: 13px; }
  .top .btn .arrow{ width: 22px; height: 22px;}
  .top .btn .arrow svg{ width: 10px; height: 10px; }
  .menu-btn{ display:none; background:transparent; border:1px solid var(--line); width:42px; height:42px; border-radius:100px;}
  @media (max-width: 980px){
    .nav{ display: none; }
    .menu-btn{ display: inline-grid; place-items:center;}
    .lang-toggle{ display:none; }
  }

  /* ========================= HERO ========================= */

  .hero{
    padding: clamp(40px, 6vw, 88px) var(--pad-x) clamp(60px, 8vw, 120px);
    position: relative;
  }
  .hero-meta{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: end;
    margin-bottom: clamp(32px, 5vw, 64px);
  }
  .hero-meta .mid{ text-align: center; }
  .hero-meta .right{ text-align: right; }
  .hero-meta .label{
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
  }
  .hero-meta .val{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    margin-top: 2px;
  }
  .hero-headline{
    text-align: center;
  }
  .hero-line{ display:block; }
  .hero-figure{
    margin: clamp(32px, 5vw, 60px) auto 0;
    max-width: 1280px;
    position: relative;
  }
  .hero-img-wrap{
    position: relative;
    aspect-ratio: 21 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-2);
  }
  .hero-img-wrap img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 8s cubic-bezier(.22,.61,.36,1);
    transform: scale(1.04);
  }
  .hero-figure:hover .hero-img-wrap img{ transform: scale(1.0); }
  .hero-corner-tl, .hero-corner-tr, .hero-corner-bl, .hero-corner-br{
    position: absolute;
    width: 22px; height: 22px;
    border: 1px solid var(--ink);
    z-index: 2;
    pointer-events: none;
  }
  .hero-corner-tl{ top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .hero-corner-tr{ top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
  .hero-corner-bl{ bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
  .hero-corner-br{ bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

  .hero-figcap{
    margin-top: 14px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
  }

  .hero-ticker{
    margin-top: clamp(32px, 5vw, 60px);
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .hero-ticker .live{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink);
  }
  .hero-ticker .dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 0 rgba(255,74,28,0.6);
    animation: pulse 2s infinite;
  }
  @keyframes pulse{
    0%   { box-shadow: 0 0 0 0 rgba(255,74,28,0.6);}
    70%  { box-shadow: 0 0 0 10px rgba(255,74,28,0);}
    100% { box-shadow: 0 0 0 0 rgba(255,74,28,0);}
  }
  .ticker-row{
    display:flex; gap: 36px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink);
  }
  .ticker-row span b{ color: var(--orange); font-weight: 500; margin-right: 2px;}

  /* ========================= LOGOS STRIP ========================= */
  .logos{
    padding: clamp(40px, 5vw, 72px) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  .logos-head{
    display: flex; justify-content: space-between; align-items: end;
    gap: 24px;
    padding: 0 var(--pad-x);
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
  .logos-head .lh-l{ max-width: 480px; }
  .logos-head h3{
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.1;
  }
  .logos-marquee{
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    overflow: hidden;
  }
  .logos-track{
    display: flex;
    gap: 64px;
    width: max-content;
    align-items: center;
    animation: marquee-l 40s linear infinite;
  }
  @keyframes marquee-l{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  .logo-item{
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.04em;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 12px;
    opacity: 0.88;
  }
  .logo-item .star{ color: var(--orange); font-size: 0.7em;}

  /* ========================= ABOUT ========================= */
  .about{
    padding: var(--section-pad) var(--pad-x);
  }
  .about-grid{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 96px);
    max-width: 1480px;
    margin: 0 auto;
    align-items: start;
  }
  .about-h{
    font-size: clamp(36px, 4.8vw, 72px);
    line-height: 1.0;
    letter-spacing: -0.04em;
  }
  .about-h em{
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }
  .about-side{ display: flex; flex-direction: column; gap: 28px; }
  .about-side p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; max-width: 540px; }
  .about-stats{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 32px;
  }
  .stat .num{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(38px, 4.2vw, 64px);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .stat .lbl{
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 8px;
    max-width: 160px;
  }
  .kanji-card{
    position: relative;
    aspect-ratio: 1/1.18;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
    color: var(--on-dark);
    padding: 32px;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .kanji-card .glyph{
    position: absolute;
    top: -10%; right: -8%;
    font-family: var(--f-serif);
    font-size: clamp(280px, 36vw, 520px);
    line-height: 0.82;
    color: var(--orange);
    opacity: 0.96;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.03em;
  }
  .kanji-card .kc-inner{ position: relative; z-index: 2; display:flex; flex-direction:column; gap: 12px;}
  .kanji-card .kc-eyebrow{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--on-dark);
    text-transform: uppercase;
  }
  .kanji-card .kc-mean{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 32px);
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
  .kanji-card .kc-rule{
    width: 36px; height: 2px; background: var(--orange); margin: 8px 0 4px;
  }
  .kanji-card .kc-quote{
    font-size: 14px; line-height: 1.55;
    color: var(--muted-d);
    max-width: 360px;
  }
  @media (max-width: 900px){
    .about-grid{ grid-template-columns: 1fr; }
    .about-stats{ grid-template-columns: 1fr 1fr; }
    .kanji-card{ aspect-ratio: 4/5; }
  }

  /* ========================= SERVICES ========================= */
  .services{
    padding: var(--section-pad) var(--pad-x);
    background: var(--ink);
    color: var(--on-dark);
    border-radius: var(--radius-lg);
    margin: 0 var(--pad-x);
  }
  .services-head{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    max-width: 1480px;
    margin: 0 auto 64px;
  }
  .services-head h2{
    color: var(--on-dark);
    font-size: clamp(40px, 6vw, 96px);
  }
  .services-head h2 em{
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--orange);
    font-weight: 400;
  }
  .services-head .right{ max-width: 460px; color: var(--muted-d);}
  .svc-list{
    max-width: 1480px; margin: 0 auto;
    border-top: 1px solid var(--line-d);
  }
  .svc-row{
    display: grid;
    grid-template-columns: 90px 2fr 1.4fr 220px;
    gap: 32px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line-d);
    align-items: center;
    position: relative;
    transition: padding .35s ease;
  }
  .svc-row .num{
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--muted-d);
  }
  .svc-row h3{
    color: var(--on-dark);
    font-size: clamp(26px, 2.6vw, 40px);
    font-weight: 500;
    letter-spacing: -0.025em;
  }
  .svc-row h3 em{
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }
  .svc-row .desc{
    color: var(--muted-d);
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 420px;
  }
  .svc-tags{
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 12px;
  }
  .svc-tags span{
    font-family: var(--f-mono);
    font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--line-d);
    border-radius: 100px;
    color: var(--on-dark);
  }
  .svc-arrow{
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(242,239,233,0.08);
    color: var(--on-dark);
    display: inline-grid; place-items: center;
    justify-self: end;
    transition: background .25s, color .25s, transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .svc-arrow svg{ width: 18px; height: 18px;}
  .svc-row:hover .svc-arrow{
    background: var(--orange);
    transform: translate(4px, -4px) rotate(0deg);
    color: #fff;
  }
  .svc-row .hover-img{
    position: absolute;
    right: 240px; top: 50%;
    transform: translateY(-50%) scale(0.9);
    width: 280px; aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    z-index: 3;
  }
  .svc-row:hover .hover-img{
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .svc-row .hover-img img{ width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 900px){
    .services{ margin: 0; border-radius: 0; }
    .svc-row{ grid-template-columns: 60px 1fr; gap: 16px; padding: 24px 0;}
    .svc-row .desc, .svc-row .svc-tags{ display:none; }
    .svc-arrow{ display:none; }
  }

  /* ========================= PROCESS ========================= */
  .process{
    padding: var(--section-pad) var(--pad-x);
  }
  .process-head{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    max-width: 1480px;
    margin: 0 auto 64px;
  }
  .process-head h2{ font-size: clamp(40px, 5.6vw, 88px); }
  .process-head h2 em{
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--orange);
    font-weight: 400;
  }
  .process-head .right{ max-width: 420px; color: var(--muted);}
  .proc-grid{
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .proc-card{
    background: var(--bg-2);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    display: flex; flex-direction: column;
    transition: background .3s;
  }
  .proc-card:hover{ background: var(--ink); color: var(--on-dark);}
  .proc-card:hover .proc-num{ color: var(--orange); }
  .proc-card .proc-img{
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #ccc;
  }
  .proc-card .proc-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1);}
  .proc-card:hover .proc-img img{ transform: scale(1.06); }
  .proc-card .body{ padding: 28px 24px 28px; display:flex; flex-direction: column; gap: 10px;}
  .proc-num{
    font-family: var(--f-mono);
    font-size: 12px; letter-spacing: 0.16em;
    color: var(--muted);
    transition: color .3s;
  }
  .proc-card h3{
    font-size: 22px;
    letter-spacing: -0.02em;
    font-weight: 500;
  }
  .proc-card .desc{ font-size: 13.5px; line-height: 1.55; color: var(--muted); transition: color .3s; }
  .proc-card:hover .desc{ color: var(--muted-d); }
  @media (max-width: 900px){
    .proc-grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px){
    .proc-grid{ grid-template-columns: 1fr; }
  }

  /* ========================= WHY US ========================= */
  .why{
    padding: var(--section-pad) var(--pad-x);
    background: var(--bg-2);
  }
  .why-grid{
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1.6fr;
    gap: 64px;
  }
  .why-left h2{
    font-size: clamp(36px, 4.8vw, 72px);
    letter-spacing: -0.04em;
  }
  .why-left h2 em{
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--orange);
    font-weight: 400;
  }
  .why-left p{ max-width: 380px; margin-top: 20px; color: var(--muted);}
  .why-left .btn{ margin-top: 32px; }
  .why-img-card{
    margin-top: 36px;
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
    position: relative;
  }
  .why-img-card img{ width: 100%; height: 100%; object-fit: cover;}
  .why-right{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .why-card{
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px 24px;
    display: flex; flex-direction: column;
    gap: 14px;
    border: 1px solid var(--line);
    min-height: 240px;
    position: relative;
    overflow: hidden;
  }
  .why-card.dark{
    background: var(--ink);
    color: var(--on-dark);
    border-color: var(--ink);
  }
  .why-card .ico{
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: rgba(10,10,10,0.06);
    color: var(--orange);
    display: inline-grid; place-items: center;
  }
  .why-card.dark .ico{ background: rgba(255,255,255,0.06);}
  .why-card h4{
    font-size: 20px;
    letter-spacing: -0.02em;
    font-weight: 500;
  }
  .why-card p{ font-size: 13.5px; line-height: 1.55; color: var(--muted);}
  .why-card.dark p{ color: var(--muted-d);}
  .why-card .meta{
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .why-card.dark .meta{ color: var(--muted-d);}
  .why-card .meta b{
    color: var(--orange); font-weight: 500;
  }
  @media (max-width: 1000px){
    .why-grid{ grid-template-columns: 1fr;}
    .why-right{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px){
    .why-right{ grid-template-columns: 1fr;}
  }

  /* ========================= TESTIMONIAL ========================= */
  .testi{
    padding: var(--section-pad) var(--pad-x);
    background: var(--ink);
    color: var(--on-dark);
  }
  .testi-inner{
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 64px;
    align-items: stretch;
  }
  .testi-left{
    display: flex; flex-direction: column; gap: 24px;
    justify-content: space-between;
  }
  .testi-left .eyebrow.on-dark{ color: var(--on-dark);}
  .testi-left h2{
    font-size: clamp(32px, 4vw, 56px);
    color: var(--on-dark);
    letter-spacing: -0.035em;
  }
  .testi-left h2 em{
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--orange);
    font-weight: 400;
  }
  .testi-port{
    aspect-ratio: 1/1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
    display: grid;
    place-items: center;
  }
  .testi-port img{ width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; animation: enkai-float 14s ease-in-out infinite, enkai-spin 50s linear infinite;}
  .testi-right{ display:flex; flex-direction: column; justify-content: space-between; gap: 24px;}
  .quote-mark{
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--orange);
    font-size: 160px;
    line-height: 0.6;
    letter-spacing: -0.06em;
  }
  .testi-q{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 40px);
    line-height: 1.18;
    letter-spacing: -0.025em;
    max-width: 760px;
  }
  .testi-q em{
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--orange);
    font-weight: 400;
  }
  .testi-meta{
    display: flex; justify-content: space-between; align-items: end;
    border-top: 1px solid var(--line-d);
    padding-top: 24px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .testi-person b{ font-weight: 500; font-size: 16px; display:block;}
  .testi-person small{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted-d); text-transform: uppercase;}
  .testi-pager{
    display: flex; gap: 8px;
  }
  .testi-pager button{
    width: 46px; height: 46px; border-radius: 50%;
    background: transparent; border: 1px solid var(--line-d);
    color: var(--on-dark); display: grid; place-items: center;
    transition: background .2s, color .2s;
  }
  .testi-pager button:hover{ background: var(--orange); border-color: var(--orange);}
  .testi-pager .idx{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.16em; align-self: center; color: var(--muted-d); margin: 0 8px;}
  .testi-pager .idx b{ color: var(--on-dark); font-weight: 500;}
  @media (max-width: 900px){
    .testi-inner{ grid-template-columns: 1fr;}
    .testi-port{ max-width: 360px; }
  }

  /* ========================= INSIGHTS ========================= */
  .insights{
    padding: var(--section-pad) var(--pad-x);
  }
  .insights-head{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px; align-items: end;
    max-width: 1480px; margin: 0 auto 48px;
  }
  .insights-head h2{
    font-size: clamp(40px, 5.2vw, 80px);
  }
  .insights-head h2 em{
    font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;
  }
  .ins-grid{
    max-width: 1480px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
  }
  .ins-card{
    background: var(--bg-2);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .ins-card:hover{ transform: translateY(-4px); }
  .ins-card.featured{ grid-row: span 1; }
  .ins-card .img{ aspect-ratio: 16/10; overflow: hidden;}
  .ins-card.featured .img{ aspect-ratio: 16/11; }
  .ins-card .img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1);}
  .ins-card:hover .img img{ transform: scale(1.04);}
  .ins-card .body{ padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 12px;}
  .ins-meta{
    display: flex; justify-content: space-between;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .ins-meta .cat{ color: var(--orange);}
  .ins-card h3{
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 500;
  }
  .ins-card.featured h3{ font-size: clamp(22px, 2vw, 28px); }
  .ins-card .ins-cta{
    margin-top: auto;
    padding-top: 8px;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-sans);
    font-size: 13px;
    font-weight: 500;
  }
  .ins-card .ins-cta .arrow{
    width: 22px; height: 22px; border-radius:50%; background: var(--ink); color:#fff;
    display: inline-grid; place-items: center;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .ins-card:hover .ins-cta .arrow{ background: var(--orange); transform: translate(2px, -2px);}
  .ins-card .ins-cta .arrow svg{ width:10px; height:10px;}
  @media (max-width: 900px){
    .ins-grid{ grid-template-columns: 1fr;}
  }

  /* ========================= CTA BAR ========================= */
  .cta-bar{
    padding: var(--section-pad) var(--pad-x) calc(var(--section-pad) / 1.4);
    background: var(--bg);
  }
  .cta-card{
    max-width: 1480px; margin: 0 auto;
    background: var(--orange);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(48px, 7vw, 100px) clamp(32px, 5vw, 80px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: end;
    position: relative;
    overflow: hidden;
  }
  .cta-card::before{
    content: 'ENKAI';
    position: absolute;
    bottom: -10%; left: -3%;
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: clamp(200px, 32vw, 480px);
    line-height: 0.82;
    letter-spacing: -0.06em;
    color: rgba(0,0,0,0.08);
    pointer-events: none;
    user-select: none;
  }
  .cta-card > *{ position: relative; z-index: 2;}
  .cta-card h2{
    font-size: clamp(40px, 5vw, 80px);
    color: #fff;
  }
  .cta-card h2 em{
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    color: #fff;
  }
  .cta-card p{
    max-width: 420px; margin-top: 16px;
    color: rgba(255,255,255,0.86);
    font-size: 16px; line-height: 1.55;
  }
  .cta-card .btn{
    background: var(--ink); color: var(--on-dark);
    margin-top: 32px;
  }
  .cta-card .btn .arrow{ background: var(--orange); color: #fff;}
  .cta-meta{
    text-align: right;
    color: rgba(255,255,255,0.86);
  }
  .cta-meta .item{
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding: 16px 0;
    display: flex; justify-content: space-between;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .cta-meta .item:last-child{ border: 0; }
  .cta-meta .item b{ color: #fff; font-weight: 500;}
  @media (max-width: 900px){
    .cta-card{ grid-template-columns: 1fr; padding: 48px 32px;}
    .cta-meta{ text-align: left;}
  }

  /* ========================= FOOTER ========================= */
  footer{
    background: var(--ink);
    color: var(--on-dark);
    padding: clamp(64px, 8vw, 120px) var(--pad-x) 32px;
  }
  .foot-grid{
    max-width: 1680px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
  }
  .foot-brand .brand-word{ font-size: 28px;}
  .foot-brand .tag{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 44px);
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 24px 0 32px;
  }
  .foot-brand .tag em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .news-label{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted-d); text-transform: uppercase; margin-bottom: 10px;}
  .news{
    display: flex;
    border: 1px solid var(--line-d);
    border-radius: 100px;
    overflow: hidden;
    max-width: 380px;
  }
  .news input{
    flex: 1; background: transparent; border:0;
    padding: 0 18px;
    color: var(--on-dark);
    font-family: var(--f-sans);
    font-size: 14px;
    outline: none;
  }
  .news input::placeholder{ color: var(--muted-d);}
  .news button{
    background: var(--orange); border: 0;
    color: #fff;
    width: 50px; height: 50px;
    display: grid; place-items: center;
  }
  .foot-col h5{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted-d);
    margin: 0 0 18px;
  }
  .foot-col a{
    display: block;
    padding: 6px 0;
    font-size: 14px;
    color: var(--on-dark);
    transition: color .2s;
  }
  .foot-col a:hover{ color: var(--orange);}
  .foot-bottom{
    max-width: 1680px; margin: 0 auto;
    padding-top: 32px;
    margin-top: 56px;
    border-top: 1px solid var(--line-d);
    display: flex; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted-d);
  }
  .foot-bottom a{ color: var(--muted-d); margin-left: 24px;}
  .foot-bottom a:hover{ color: var(--orange);}
  @media (max-width: 900px){
    .foot-grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px){
    .foot-grid{ grid-template-columns: 1fr; }
  }

  /* ========================= MISC ========================= */
  .section-divider{ border-top: 1px solid var(--line); }



  /* ========================= 3D OBJECTS ========================= */
  .hero-img-wrap{
    aspect-ratio: 16 / 10 !important;
    background: radial-gradient(ellipse 70% 60% at 50% 55%, var(--bg-2) 0%, var(--bg) 78%) !important;
  }
  .hero-object{
    position: absolute !important;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain !important;
    padding: clamp(20px, 4%, 64px);
    mix-blend-mode: multiply;
    transform: none !important;
    animation: enkai-float 14s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes enkai-float{
    0%,100%{ transform: translateY(0) rotate(0deg); }
    33%    { transform: translateY(-14px) rotate(-1.5deg); }
    66%    { transform: translateY(8px) rotate(1.5deg); }
  }

  .proc-img{
    background: var(--bg) !important;
    aspect-ratio: 1 / 1 !important;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .proc-object{
    width: 78% !important; height: 78% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply;
    transform: none !important;
    transition: transform .8s cubic-bezier(.22,.61,.36,1) !important;
  }
  .proc-card:hover .proc-object{ transform: scale(1.06) rotate(-2deg) !important; }
  .proc-card:hover .proc-img{ background: var(--bg-2) !important; }

  .why-img-card{
    background: var(--bg) !important;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .why-object{
    width: 80% !important; height: 80% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply;
    animation: enkai-float 16s ease-in-out infinite;
  }

  /* Service hover images — orange objects pop on a small bright off-white
     card floating above the dark services section. */
  .svc-row .hover-img{
    background: var(--bg) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .svc-row .hover-img img{
    object-fit: contain !important;
    padding: 10% !important;
    mix-blend-mode: multiply;
  }


  /* ========================= OBJECT ANIMATIONS ========================= */
  .proc-object{
    animation: enkai-character-float 5s ease-in-out infinite !important;
    transform-origin: bottom center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
  }
  .proc-card:nth-child(1) .proc-object{ animation-duration: 4.8s; animation-delay: 0s; }
  .proc-card:nth-child(2) .proc-object{ animation-duration: 5.2s; animation-delay: -0.6s; }
  .proc-card:nth-child(3) .proc-object{ animation-duration: 5.6s; animation-delay: -1.2s; }
  .proc-card:nth-child(4) .proc-object{ animation-duration: 4.6s; animation-delay: -1.8s; }
  @keyframes enkai-character-float{
    0%,100%{ transform: translateY(0) rotate(-2deg); }
    50%    { transform: translateY(-12px) rotate(2deg); }
  }
  .proc-card:hover .proc-object{
    transform: translateY(-18px) scale(1.05) !important;
  }
  .proc-card:hover .proc-object{
    animation-play-state: paused !important;
  }
  @keyframes enkai-spin{
    from{ transform: rotate(0deg); }
    to{   transform: rotate(360deg); }
  }
  @keyframes enkai-bob{
    0%,100%{ filter: brightness(1); }
    50%    { filter: brightness(0.96); }
  }

  /* svc hover image: float + slight rotate on entry */
  .svc-row .hover-img img{
    animation: enkai-orbit 12s ease-in-out infinite;
  }
  @keyframes enkai-orbit{
    0%,100%{ transform: translateY(0) rotate(-4deg); }
    50%    { transform: translateY(-8px) rotate(4deg); }
  }

  /* About-section kanji-card: gentle pulse on the kanji glyph */
  .kanji-card .glyph{
    animation: enkai-glyph-pulse 9s ease-in-out infinite;
    transform-origin: 70% 30%;
  }
  @keyframes enkai-glyph-pulse{
    0%,100%{ opacity: 0.92; transform: scale(1) rotate(0); }
    50%    { opacity: 1;    transform: scale(1.04) rotate(-2deg); }
  }

  /* services.html col-img objects: rotate slowly with different speeds */
  .svc-block .col-img img{
    animation: enkai-spin 30s linear infinite, enkai-bob 7s ease-in-out infinite;
  }
  .svc-block:nth-of-type(odd) .col-img img{ animation-duration: 36s, 8s; animation-direction: reverse, normal; }

  /* Hero object: combine float + ultra-slow rotation for life */
  .hero-object{
    animation: enkai-float 14s ease-in-out infinite, enkai-spin 60s linear infinite !important;
  }

  /* Why-object: slow counter-rotate */
  .why-object{
    animation: enkai-float 16s ease-in-out infinite, enkai-spin 45s linear infinite reverse !important;
  }

  @media (prefers-reduced-motion: reduce){
    .hero-object, .proc-object, .why-object, .svc-row .hover-img img, .svc-block .col-img img, .kanji-card .glyph{
      animation: none !important;
    }
  }


  /* ====================================================================
     RESPONSIVE — PHONE / TABLET
     ==================================================================== */

  /* Tablet ≤ 1024 */
  @media (max-width: 1024px){
    :root{
      --pad-x: clamp(18px, 4vw, 48px);
      --section-pad: clamp(56px, 7vw, 96px);
    }
    .top-row{ padding: 12px var(--pad-x); }
    .hero-meta{ grid-template-columns: 1fr; gap: 16px; }
    .hero-meta .mid{ text-align: left; }
    .hero-meta .right{ text-align: left; }
    .testi-inner{ grid-template-columns: 1fr; }
    .testi-port{ max-width: 360px; }
  }

  /* Phone ≤ 720 */
  @media (max-width: 720px){
    :root{
      --pad-x: 18px;
      --section-pad: 56px;
      --radius-lg: 14px;
    }

    /* Header */
    .top-row{ gap: 12px; padding: 10px var(--pad-x); }
    .brand-mark{ width: 32px; height: 32px; border-radius: 8px; }
    .brand-word{ font-size: 18px; }
    .top .btn{ height: 38px; padding: 0 14px 0 16px; font-size: 12px; gap: 8px; }
    .top .btn .arrow{ width: 20px; height: 20px;}
    .top .btn .arrow svg{ width: 9px; height: 9px;}

    /* Buttons */
    .btn{ height: 48px; padding: 0 18px 0 22px; font-size: 14px; gap: 10px;}
    .btn .arrow{ width: 26px; height: 26px;}

    /* Type */
    .h-display, .hero-headline{ font-size: clamp(44px, 14vw, 88px) !important; letter-spacing: -0.04em !important; }
    h2{ font-size: clamp(28px, 8vw, 44px) !important; }
    h3{ font-size: clamp(20px, 5vw, 26px) !important;}
    .lead{ font-size: 15px !important; }

    /* Hero */
    .hero{ padding: 24px var(--pad-x) 56px; }
    .hero-figure{ margin-top: 32px; }
    .hero-img-wrap{ aspect-ratio: 4 / 3 !important; }
    .hero-figcap{ font-size: 9px; flex-direction: column; align-items: flex-start; gap: 6px; }
    .hero-ticker{ flex-direction: column; align-items: flex-start; padding-top: 18px; gap: 14px; }
    .hero-ticker .ticker-row{ flex-direction: column; gap: 8px; font-size: 10px; }
    .hero-ticker .ticker-row span{ display: block; }

    /* Section heads with side-by-side become stacks */
    .services-head, .process-head, .insights-head, .logos-head, .ph-grid, .why-grid, .about-grid{
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    .insights-head{ align-items: start; }
    .insights-head .btn{ align-self: flex-start; }

    /* Services panel */
    .services{ margin: 0; border-radius: 0; padding: var(--section-pad) var(--pad-x); }
    .svc-list{ border-top: 1px solid var(--line-d); }
    .svc-row{ grid-template-columns: 50px 1fr !important; gap: 14px !important; padding: 22px 0 !important; }
    .svc-row .desc, .svc-row .svc-tags, .svc-arrow, .svc-row .hover-img{ display: none !important; }
    .svc-row h3{ font-size: 22px !important;}

    /* Process grid → 1 column on phones */
    .proc-grid{ grid-template-columns: 1fr !important; }
    .proc-card .body{ padding: 22px 20px; }

    /* Why */
    .why-right{ grid-template-columns: 1fr !important; }
    .why-card{ min-height: 200px; padding: 22px 20px; }
    .why-img-card{ margin-top: 24px; aspect-ratio: 4/3; }

    /* About / kanji */
    .about-stats{ grid-template-columns: 1fr 1fr !important; gap: 12px; }
    .about-stats .stat .num{ font-size: 36px !important; }
    .kanji-card{ aspect-ratio: 4/5; padding: 24px; }
    .kanji-card .glyph{ font-size: 280px; top: -8%; right: -10%;}

    /* CTA */
    .cta-bar{ padding: 56px var(--pad-x); }
    .cta-card{ grid-template-columns: 1fr !important; padding: 36px 24px !important; gap: 28px; border-radius: 14px;}
    .cta-card h2{ font-size: clamp(32px, 8vw, 48px) !important; }
    .cta-card::before{ font-size: 200px; bottom: -8%; left: -8%;}
    .cta-meta{ text-align: left !important;}
    .cta-meta .item{ font-size: 10px; padding: 12px 0; }

    /* Insights */
    .ins-grid{ grid-template-columns: 1fr !important; }
    .ins-card.featured .img{ aspect-ratio: 16/10;}
    .ins-card h3{ font-size: 18px !important; }

    /* Testimonial */
    .testi{ padding: var(--section-pad) var(--pad-x);}
    .testi-port{ max-width: 100%; }
    .testi-q{ font-size: clamp(20px, 5.5vw, 26px) !important; line-height: 1.22; }
    .quote-mark{ font-size: 100px; }
    .testi-meta{ flex-direction: column; align-items: flex-start; gap: 12px; }
    .testi-pager{ align-self: flex-end; }

    /* Footer */
    footer{ padding: 56px var(--pad-x) 24px; }
    .foot-grid{ grid-template-columns: 1fr !important; gap: 32px; }
    .foot-brand .tag{ font-size: 24px;}
    .foot-bottom{ flex-direction: column; gap: 12px; align-items: flex-start; font-size: 10px;}
    .foot-bottom a{ margin-left: 0; margin-right: 14px; }

    /* Subpages — page-hero */
    .page-hero{ padding: 28px var(--pad-x) 36px; }
    .page-hero h1{ font-size: clamp(40px, 12vw, 80px) !important; }
    .crumbs{ font-size: 10px;}

    /* Services subpage svc-block */
    .svc-block, .svc-block.alt{ grid-template-columns: 1fr !important; padding: 48px var(--pad-x) !important; gap: 28px !important;}
    .svc-block .col-img{ aspect-ratio: 4/5; max-width: 320px;}
    .svc-block .num-big{ font-size: clamp(64px, 18vw, 120px) !important; }
    .svc-block h2{ font-size: clamp(28px, 7vw, 40px) !important;}
    .svc-block .deliv-row{ grid-template-columns: 50px 1fr !important; gap: 14px !important; padding: 14px 0 !important;}
    .svc-block .deliv-row .d-price{ display: none;}
    .svc-block .stats{ grid-template-columns: 1fr;}

    /* Pricing grid */
    .price-grid{ grid-template-columns: 1fr !important;}
    .price-card{ padding: 28px 22px;}

    /* Portfolio */
    .case-grid{ grid-template-columns: 1fr !important; gap: 18px;}
    .case.wide{ grid-column: auto !important;}
    .case .case-media{ aspect-ratio: 16/10 !important;}
    .case h3{ font-size: 20px !important;}
    .case .body{ grid-template-columns: 1fr auto; gap: 14px;}
    .case .case-result{ font-size: 22px !important; padding: 8px 12px;}
    .filters{ padding: 18px var(--pad-x); gap: 8px; overflow-x: auto; flex-wrap: nowrap;}
    .filter-pill{ flex-shrink: 0; padding: 9px 14px; font-size: 10px;}

    /* Methodology */
    .method-grid{ grid-template-columns: 1fr !important; gap: 28px;}
    .method-list{ grid-template-columns: 1fr !important;}

    /* Contact form */
    .contact-grid{ grid-template-columns: 1fr !important; gap: 32px;}
    .form-card{ padding: 24px 20px !important;}
    .form-card h2{ font-size: 24px !important; margin-bottom: 24px;}
    .field-row{ grid-template-columns: 1fr !important;}
    .field input, .field textarea{ font-size: 16px !important; /* prevent iOS zoom */}
    .form-submit{ flex-direction: column-reverse; align-items: stretch;}
    .info-block a, .info-block p{ font-size: 18px !important;}

    /* FAQ */
    .faq{ padding: var(--section-pad) var(--pad-x);}
    .faq-grid{ grid-template-columns: 1fr !important; gap: 28px;}
    .faq-list .q-head .q-text{ font-size: 16px !important;}
    .faq-list .q-toggle{ width: 34px; height: 34px;}

    /* Featured blog post */
    .fp-inner{ grid-template-columns: 1fr !important; gap: 24px !important;}
    .pl-grid{ grid-template-columns: 1fr !important;}

    /* About page */
    .manifesto p.lead-big{ font-size: clamp(22px, 6vw, 32px) !important;}
    .manifesto .sub{ grid-template-columns: 1fr !important; gap: 18px;}
    .nums-inner{ grid-template-columns: 1fr 1fr !important; gap: 24px !important;}
    .nb .nm{ font-size: clamp(48px, 14vw, 72px) !important;}
    .values-head{ grid-template-columns: 1fr !important;}
    .v-grid{ grid-template-columns: 1fr !important;}
  }

  /* Very small phones ≤ 380 */
  @media (max-width: 380px){
    :root{ --pad-x: 14px; }
    .top .btn{ display: none;}
    .lang-toggle{ display: none;}
    .h-display, .hero-headline{ font-size: 40px !important;}
    h2{ font-size: 28px !important;}
    .price-card .from{ font-size: 36px;}
  }

  /* =================== MOBILE NAV DRAWER =================== */
  .mobile-drawer{
    position: fixed;
    inset: 0;
    background: var(--ink);
    color: var(--on-dark);
    z-index: 100;
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    display: flex; flex-direction: column;
    padding: 80px var(--pad-x) 32px;
    overflow-y: auto;
  }
  .mobile-drawer.open{ transform: translateY(0); }
  .mobile-drawer .close-btn{
    position: absolute;
    top: 14px; right: var(--pad-x);
    width: 42px; height: 42px;
    border-radius: 100px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line-d);
    color: var(--on-dark);
    display: grid; place-items: center;
  }
  .mobile-drawer .md-brand{
    position: absolute;
    top: 14px; left: var(--pad-x);
  }
  .mobile-drawer .md-brand .brand-word{ color: var(--on-dark); }
  .mobile-drawer .md-nav{
    display: flex; flex-direction: column;
    gap: 6px;
    margin-top: 12px;
  }
  .mobile-drawer .md-nav a{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(36px, 10vw, 64px);
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--on-dark);
    padding: 8px 0;
    border-bottom: 1px solid var(--line-d);
    display: flex; justify-content: space-between; align-items: center;
  }
  .mobile-drawer .md-nav a .num{
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted-d);
    font-weight: 400;
  }
  .mobile-drawer .md-nav a:hover, .mobile-drawer .md-nav a.active{
    color: var(--orange);
  }
  .mobile-drawer .md-foot{
    margin-top: auto;
    padding-top: 36px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .mobile-drawer .md-foot .btn{ width: 100%; justify-content: space-between; }
  .mobile-drawer .md-foot .meta{
    font-family: var(--f-mono); font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-d);
    display: flex; gap: 20px;
  }
  body.drawer-open{ overflow: hidden; }


  /* ====================================================================
     DARK THEME — applied site-wide, with new full-bleed hero
     ==================================================================== */

  :root{
    --bg:        #0A0A0A;
    --bg-2:      #131313;
    --bg-3:      #1C1C1C;
    --ink:       #F2EFE9;
    --ink-2:     #DCD7CB;
    --line:      rgba(242,239,233,0.10);
    --line-2:    rgba(242,239,233,0.18);
    --line-d:    rgba(242,239,233,0.14);
    --muted:     rgba(242,239,233,0.60);
    --muted-2:   rgba(242,239,233,0.42);
    --muted-d:   rgba(242,239,233,0.60);
    --on-dark:   #F2EFE9;
  }

  body{ background: var(--bg); color: var(--ink); }
  ::selection{ background: var(--orange); color: #fff;}

  /* HEADER (sticky, dark) */
  .top{
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
  }
  body{ padding-top: 0; }
  .brand{ color: var(--ink); }
  .brand-word{ color: var(--ink); }
  .nav a{ color: var(--ink); }
  .nav a:hover{ background: rgba(242,239,233,0.08); }
  .nav a.active{ background: var(--orange); color: #fff; }
  .lang-toggle{ color: var(--muted);}
  .lang-toggle b{ color: var(--ink);}
  .menu-btn{ border-color: var(--line-2); color: var(--ink); }

  /* BUTTONS */
  .btn-dark{ background: var(--ink); color: var(--bg);}
  .btn-dark .arrow{ background: var(--orange); color: #fff;}
  .btn-dark:hover{ background: #fff; }
  .btn-light{ background: var(--bg-2); color: var(--ink); border-color: var(--line-2);}
  .btn-light .arrow{ background: var(--ink); color: var(--bg);}
  .btn-ghost{ color: var(--ink); border-color: var(--line-2); }
  .btn-ghost .arrow{ background: var(--ink); color: var(--bg);}
  .btn-ghost:hover{ background: rgba(242,239,233,0.06);}
  .btn-orange{ background: var(--orange); color: #fff;}

  /* ============== FULL-BLEED HERO ============== */
  .hero.hero-full{
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    background: #000;
    overflow: hidden;
    padding: 0;
    display: flex; flex-direction: column;
  }
  .hero-bg-video{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .hero-veil{
    position: absolute; inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,0.0) 55%, rgba(0,0,0,0.85) 100%),
      radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
  }
  .hero-content{
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding: clamp(110px, 12vw, 170px) var(--pad-x) clamp(36px, 5vw, 64px);
    color: var(--ink);
  }
  .hero-top-meta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  .hero-top-meta .right{ text-align: right; }
  .hero-top-meta .label{
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(242,239,233,0.55);
  }
  .hero-top-meta .val{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    margin-top: 4px;
    color: var(--ink);
  }
  .hero-full .hero-headline{
    text-align: center;
    color: var(--ink);
    font-size: clamp(60px, 13vw, 220px);
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-weight: 500;
    margin: 0;
  }
  .hero-full .hero-headline em{
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }
  .hero-bottom{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(242,239,233,0.14);
  }
  .hero-bottom .live{
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink);
  }
  .hero-bottom .live .dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 0 rgba(255,74,28,0.6);
    animation: pulse 2s infinite;
  }
  .hero-bottom .ticker-row{
    display: flex; justify-content: center; gap: 32px;
    font-family: var(--f-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink);
  }
  .hero-bottom .ticker-row span b{ color: var(--orange); font-weight: 500; margin-right: 4px;}
  .hero-bottom .scroll-cue{
    font-family: var(--f-mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(242,239,233,0.6);
    animation: scroll-bob 2.4s ease-in-out infinite;
  }
  @keyframes scroll-bob{
    0%,100% { transform: translateY(0); opacity: 0.6;}
    50%     { transform: translateY(4px); opacity: 1; }
  }
  @media (max-width: 900px){
    .hero-top-meta{ grid-template-columns: 1fr; }
    .hero-top-meta .right{ text-align: left; }
    .hero-bottom{ grid-template-columns: 1fr; gap: 12px;}
    .hero-bottom .ticker-row{ justify-content: flex-start; flex-direction: column; gap: 6px;}
  }

  /* ============== ABOUT (dark) ============== */
  .about{ background: var(--bg); }
  .about-h{ color: var(--ink);}
  .about-side p{ color: var(--ink);}
  .about-side p.muted, .about-side .muted{ color: var(--muted);}
  .about-stats{ border-top-color: var(--line);}
  .stat .num{ color: var(--ink);}
  .stat .lbl{ color: var(--muted);}
  .kanji-card{ background: var(--bg-2); color: var(--ink); border: 1px solid var(--line);}
  .kanji-card .glyph{ color: var(--orange); opacity: 0.9;}
  .kanji-card .kc-quote{ color: var(--muted);}

  /* ============== SERVICES (still dark, slightly different) ============== */
  .services{ background: var(--bg-2); margin: 0; border-radius: 0; }
  .services-head h2{ color: var(--ink);}
  .services-head .right{ color: var(--muted);}
  .svc-list{ border-top: 1px solid var(--line);}
  .svc-row{ border-bottom-color: var(--line);}
  .svc-row h3{ color: var(--ink);}
  .svc-row .desc{ color: var(--muted);}
  .svc-tags span{ border-color: var(--line-2); color: var(--ink);}
  .svc-arrow{ background: rgba(242,239,233,0.08); color: var(--ink);}

  /* ============== PROCESS ============== */
  .process{ background: var(--bg);}
  .process-head h2{ color: var(--ink);}
  .process-head .right p{ color: var(--muted);}
  .proc-card{ background: var(--bg-2); color: var(--ink);}
  .proc-card:hover{ background: var(--bg-3); color: var(--ink);}
  .proc-card .proc-num{ color: var(--muted);}
  .proc-card:hover .proc-num{ color: var(--orange);}
  .proc-card .desc{ color: var(--muted);}
  .proc-card h3{ color: var(--ink);}
  .proc-img{ background: var(--bg) !important;}
  .proc-card:hover .proc-img{ background: var(--bg-3) !important;}
  /* On dark bg: glass-* objects (rendered on white) need inversion.
     Orange-* objects already have native dark/orange palette — leave them alone. */
  .proc-object, .hero-object, .why-object, .svc-block .col-img img, .testi-port img,
  .svc-row .hover-img img{
    mix-blend-mode: normal !important;
  }
  img[src*="/glass-"]{
    filter: invert(1) hue-rotate(180deg);
  }
  /* Service hover-img card: dark, no border background washout */
  .svc-row .hover-img{ background: var(--bg) !important; border: 1px solid var(--line-d); box-shadow: 0 30px 60px rgba(0,0,0,0.7) !important;}

  /* ============== WHY US ============== */
  .why{ background: var(--bg-2);}
  .why-left h2{ color: var(--ink);}
  .why-left p{ color: var(--muted);}
  .why-card{ background: var(--bg); border-color: var(--line); color: var(--ink);}
  .why-card.dark{ background: var(--bg-3); border-color: var(--line); color: var(--ink);}
  .why-card .ico{ background: rgba(242,239,233,0.06); color: var(--orange);}
  .why-card h4{ color: var(--ink);}
  .why-card p{ color: var(--muted);}
  .why-card .meta{ color: var(--muted);}
  .why-img-card{ background: var(--bg) !important; }

  /* ============== TESTIMONIAL (already dark, just confirm) ============== */
  .testi{ background: var(--bg); color: var(--ink);}
  .testi-left h2{ color: var(--ink);}
  .testi-q{ color: var(--ink);}
  .testi-meta{ border-top-color: var(--line);}
  .testi-person b{ color: var(--ink);}
  .testi-person small{ color: var(--muted);}
  .testi-pager button{ border-color: var(--line); color: var(--ink);}

  /* ============== INSIGHTS ============== */
  .insights{ background: var(--bg);}
  .insights-head h2{ color: var(--ink);}
  .ins-card{ background: var(--bg-2);}
  .ins-card h3{ color: var(--ink);}
  .ins-meta{ color: var(--muted);}
  .ins-card .ins-cta{ color: var(--ink);}
  .ins-card .ins-cta .arrow{ background: var(--ink); color: var(--bg);}

  /* ============== CTA ============== */
  .cta-bar{ background: var(--bg);}
  .cta-card{ background: var(--orange); color: #fff;}
  .cta-card .btn{ background: var(--ink); color: var(--bg);}
  .cta-card .btn .arrow{ background: var(--orange); color: #fff;}

  /* ============== FOOTER (slightly darker than bg-2) ============== */
  footer{ background: #050505; color: var(--ink);}
  .foot-brand .brand-word{ color: var(--ink);}
  .foot-col h5{ color: var(--muted);}
  .foot-col a{ color: var(--ink);}
  .foot-bottom{ border-top-color: var(--line); color: var(--muted);}
  .news{ border-color: var(--line);}
  .news input{ color: var(--ink);}
  .news input::placeholder{ color: var(--muted-2);}

  /* ============== PAGE HERO (subpages) ============== */
  .page-hero{ background: var(--bg); border-bottom: 1px solid var(--line);}
  .page-hero h1{ color: var(--ink);}
  .crumbs a, .crumbs span{ color: var(--ink);}
  .ph-grid .right p{ color: var(--muted);}

  /* ============== FORMS ============== */
  .form-card{ background: var(--bg-2); color: var(--ink);}
  .form-card h2{ color: var(--ink);}
  .field label{ color: var(--muted);}
  .field input, .field textarea{ color: var(--ink); border-bottom-color: var(--line-2); background: transparent;}
  .field input::placeholder, .field textarea::placeholder{ color: var(--muted-2);}
  .chip{ border-color: var(--line-2); color: var(--ink);}
  .chip:hover{ background: rgba(242,239,233,0.06);}
  .chip.on{ background: var(--ink); color: var(--bg); border-color: var(--ink);}
  .info-block h4{ color: var(--muted);}
  .info-block a, .info-block p{ color: var(--ink);}

  /* ============== FAQ ============== */
  .faq{ background: var(--bg-2);}
  .faq-grid h2{ color: var(--ink);}
  .faq-list .q{ border-top-color: var(--line);}
  .faq-list .q:last-child{ border-bottom-color: var(--line);}
  .faq-list .q-head .q-text{ color: var(--ink);}
  .faq-list .q-toggle{ background: var(--bg); border-color: var(--line-2); color: var(--ink);}
  .faq-list .q-body{ color: var(--muted);}

  /* ============== PORTFOLIO / METHOD ============== */
  .method{ background: var(--bg-2);}
  .method-item{ background: var(--bg); border-color: var(--line);}
  .method-item p{ color: var(--muted);}
  .case .case-tag{ background: rgba(0,0,0,0.7); color: var(--ink);}
  .case .case-arrow{ background: var(--ink); color: var(--bg);}
  .filter-pill{ border-color: var(--line-2); color: var(--ink);}
  .filter-pill:hover{ background: rgba(242,239,233,0.06);}
  .filter-pill.active{ background: var(--ink); color: var(--bg); border-color: var(--ink);}

  /* ============== PRICING ============== */
  .price-strip{ background: var(--bg);}
  .price-card{ background: var(--bg-2); border-color: var(--line);}

  /* ============== BLOG ============== */
  .featured-post{ background: var(--bg);}
  .fp-side h2{ color: var(--ink);}
  .fp-side p{ color: var(--muted);}
  .post-list{ background: var(--bg); border-top-color: var(--line);}
  .post{ background: var(--bg-2);}
  .post h3{ color: var(--ink);}
  .post .excerpt{ color: var(--muted);}
  .post .read{ color: var(--ink);}

  /* ============== ABOUT (page) ============== */
  .manifesto{ background: var(--bg);}
  .manifesto p.lead-big{ color: var(--ink);}
  .manifesto .sub{ color: var(--muted);}
  .nums{ background: var(--bg-2); color: var(--ink);}
  .nums .nb .lb{ border-top-color: var(--line);}
  .values{ background: var(--bg);}
  .v-card{ background: var(--bg-2);}
  .v-card p{ color: var(--muted);}
  .v-card h3{ color: var(--ink);}

  /* Section dividers / borders */
  .logos{ background: var(--bg-2); border-color: var(--line);}
  .filters{ border-bottom-color: var(--line);}

  /* Hide redundant hero figure/ticker css */
  .hero-figure, .hero-ticker, .hero-meta{ display: none; }


  /* Header is fixed — push subpage content below it */
  html{ scroll-padding-top: 80px; }
  .page-hero{ padding-top: clamp(120px, 11vw, 160px) !important;}
  .contact-hero{ padding-top: clamp(120px, 11vw, 160px) !important;}


  /* Process cards — orange hover glow */
  .proc-card{
    border: 1px solid var(--line);
    transition: background .3s, border-color .3s, box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .proc-card:hover{
    border-color: rgba(255,74,28,0.55);
    box-shadow:
      0 0 0 1px rgba(255,74,28,0.35),
      0 24px 80px -16px rgba(255,74,28,0.55),
      0 0 80px rgba(255,74,28,0.20),
      inset 0 0 60px rgba(255,74,28,0.08);
    transform: translateY(-2px);
  }
  .proc-card:hover .proc-img{
    background: radial-gradient(ellipse at center, rgba(255,74,28,0.20) 0%, var(--bg-3) 70%) !important;
  }
  .proc-card:hover .proc-object{
    filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 30px rgba(255,74,28,0.6));
  }


  /* ====================================================================
     SCROLL REVEAL + LOGO ANIMATION
     ==================================================================== */

  /* Reveal: fade + slide up when entering viewport */
  .reveal{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveal.is-in{
    opacity: 1;
    transform: translateY(0);
  }
  /* large heading reveal: bigger drop */
  h1.reveal, h2.reveal{
    transform: translateY(40px);
  }
  h1.reveal.is-in, h2.reveal.is-in{
    transform: translateY(0);
  }

  /* Service rows reveal from left with a slight delay */
  .svc-row.reveal{
    transform: translateX(-30px);
    opacity: 0;
  }
  .svc-row.reveal.is-in{
    transform: translateX(0);
    opacity: 1;
  }

  /* Process cards reveal as scale-in */
  .proc-card.reveal{
    transform: translateY(40px) scale(0.96);
  }
  .proc-card.reveal.is-in{
    transform: translateY(0) scale(1);
  }

  /* Hero spotlight effect — radial gradient follows cursor */
  .hero.hero-full{
    --mx: 50%;
    --my: 50%;
  }
  .hero.hero-full::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle 600px at var(--mx) var(--my), rgba(255,74,28,0.10), transparent 60%);
    pointer-events: none;
    transition: opacity .3s;
  }

  /* ====================================================================
     LOGO ANIMATION
     ==================================================================== */
  .brand-mark{
    transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s;
    animation: logo-idle 6s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes logo-idle{
    0%,100% { transform: rotate(0deg) scale(1); }
    25%     { transform: rotate(-3deg) scale(1.02); }
    50%     { transform: rotate(0deg) scale(1); }
    75%     { transform: rotate(3deg) scale(1.02); }
  }
  .brand:hover .brand-mark{
    animation: none;
    transform: rotate(360deg) scale(1.08);
    filter: drop-shadow(0 0 12px rgba(255,74,28,0.7));
  }
  .brand:hover .brand-word{
    color: var(--orange);
    transition: color .25s;
  }
  /* Subtle glow ring around logo */
  .brand{ position: relative; }
  .brand::before{
    content: '';
    position: absolute;
    left: -4px; top: 50%;
    width: 46px; height: 46px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,74,28,0.25), transparent 70%);
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
  }
  .brand:hover::before{ opacity: 1; }

  /* ====================================================================
     EXTRA MICRO-INTERACTIONS
     ==================================================================== */

  /* Eyebrow dot pulse */
  .eyebrow::before{
    animation: dot-pulse 2.2s ease-in-out infinite;
  }
  @keyframes dot-pulse{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%    { transform: scale(1.4); opacity: 0.7; }
  }

  /* Smooth scroll site-wide */
  html{ scroll-behavior: smooth; }

  /* Navbar links: underline grow on hover */
  .nav a:not(.active){
    position: relative;
  }
  .nav a:not(.active)::after{
    content: '';
    position: absolute;
    left: 14px; right: 14px;
    bottom: 4px;
    height: 1px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .nav a:not(.active):hover::after{
    transform: scaleX(1);
  }

  /* Card lift on hover (generic for ins-card, post, case, v-card) */
  .ins-card, .post, .case, .v-card, .method-item, .price-card{
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .3s;
  }
  .ins-card:hover, .post:hover{
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  }
  .price-card:hover:not(.featured){
    border-color: var(--orange);
    transform: translateY(-4px);
  }
  .method-item:hover{
    border-color: var(--orange);
    transform: translateY(-2px);
  }
  .v-card:hover{
    background: var(--bg-3);
    transform: translateY(-3px);
  }

  /* Section-entry: subtle scale-in for figures */
  .hero-figure, .kanji-card{
    transition: opacity .8s, transform .8s cubic-bezier(.22,.61,.36,1);
  }

  /* Underline reveal for big headlines */
  h1.h-display, .hero-headline{
    overflow: hidden;
  }

  /* Disable on reduced motion */
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal.is-in{ opacity: 1 !important; transform: none !important;}
    .brand-mark{ animation: none !important; }
    .eyebrow::before{ animation: none !important; }
    html{ scroll-behavior: auto;}
  }


  /* ====================================================================
     CONTRAST FIX — overrides for blocks that used to be "dark on light"
     but now sit in a fully-dark theme. Force them to use dark bg + light fg.
     ==================================================================== */

  /* Pricing strip on services.html */
  .price-strip{
    background: var(--bg-2) !important;
    color: var(--ink) !important;
  }
  .price-strip h2,
  .price-strip h2[style*="color: var(--on-dark)"]{
    color: var(--ink) !important;
  }
  .price-card h3{ color: var(--ink) !important; }
  .price-card .ptype{ color: var(--muted) !important;}
  .price-card ul li{ color: var(--muted) !important;}

  /* Inline color: var(--on-dark) used in markup — make sure it's still light */
  [style*="color: var(--on-dark)"]{ color: var(--ink) !important; }

  /* Kanji card — already dark, but force readable inner */
  .kanji-card{
    background: var(--bg-2) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
  }
  .kanji-card .kc-eyebrow,
  .kanji-card .kc-mean{ color: var(--ink) !important;}

  /* Services panel (was inverted dark in light theme) */
  .services{
    background: var(--bg-2) !important;
    color: var(--ink) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .services-head h2{ color: var(--ink) !important;}
  .svc-row h3{ color: var(--ink) !important;}
  .svc-tags span{ color: var(--ink) !important;}
  .svc-arrow{ background: rgba(242,239,233,0.08) !important; color: var(--ink) !important;}

  /* Why card.dark variant */
  .why-card.dark{
    background: var(--bg-3) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }

  /* Testimonial section */
  .testi{ background: var(--bg) !important; color: var(--ink) !important;}
  .testi-left h2{ color: var(--ink) !important;}
  .testi-q{ color: var(--ink) !important;}
  .testi-person b{ color: var(--ink) !important;}
  .testi-pager button{ color: var(--ink) !important;}
  .testi-pager .idx b{ color: var(--ink) !important;}

  /* Insights / blog dark arrow */
  .ins-card .ins-cta .arrow{ background: var(--ink) !important; color: var(--bg) !important;}

  /* CTA card buttons */
  .cta-card .btn{ background: var(--bg) !important; color: var(--ink) !important;}
  .cta-card .btn .arrow{ background: var(--orange) !important; color: #fff !important;}

  /* Footer */
  footer{
    background: #050505 !important;
    color: var(--ink) !important;
  }
  .foot-col a{ color: var(--ink) !important;}
  .news input{ color: var(--ink) !important;}

  /* btn-dark — was dark bg + light text; in dark theme make it light bg + dark text for contrast */
  .btn-dark{ background: var(--ink) !important; color: var(--bg) !important;}
  .btn-dark .arrow{ background: var(--orange) !important; color: #fff !important;}
  .btn-dark:hover{ background: #fff !important;}

  /* btn-light variant */
  .btn-light{ background: var(--bg-2) !important; color: var(--ink) !important; border-color: var(--line-2) !important;}
  .btn-light .arrow{ background: var(--ink) !important; color: var(--bg) !important;}

  /* btn-ghost */
  .btn-ghost{ color: var(--ink) !important; border-color: var(--line-2) !important;}
  .btn-ghost .arrow{ background: var(--ink) !important; color: var(--bg) !important;}

  /* Nav active state — orange pill instead of light-on-light */
  .nav a.active{ background: var(--orange) !important; color: #fff !important;}

  /* Filter pills (portfolio, blog) */
  .filter-pill.active{ background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important;}

  /* Case study arrow */
  .case .case-arrow{ background: var(--ink) !important; color: var(--bg) !important;}

  /* Chips (contact form) when selected */
  .chip.on{ background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important;}

  /* Mobile drawer (already dark, ensure text is light) */
  .mobile-drawer{ background: var(--bg) !important; color: var(--ink) !important;}
  .mobile-drawer .md-nav a{ color: var(--ink) !important;}
  .mobile-drawer .md-nav a:hover, .mobile-drawer .md-nav a.active{ color: var(--orange) !important;}

  /* Hero section (legacy hero-dark-section) — already replaced but just in case */
  .hero.hero-dark-section{ background: #060606 !important;}

  /* Process card hover background was --ink (now light) — make it dark glow */
  .proc-card:hover{
    background: var(--bg-3) !important;
    color: var(--ink) !important;
  }

  /* Why image card background */
  .why-img-card{ background: var(--bg-2) !important;}

  /* Pricing featured card — orange already, ensure text is white */
  .price-card.featured h3,
  .price-card.featured .from,
  .price-card.featured ul li{
    color: #fff !important;
  }
  .price-card.featured .from small{ color: rgba(255,255,255,0.7) !important;}
  .price-card.featured .ptype{ color: rgba(255,255,255,0.8) !important;}

  /* Make sure all eyebrow.on-dark on dark sections stays light */
  .eyebrow.on-dark{ color: var(--ink) !important;}

  /* Process step characters: do NOT invert, no filter — they're already dark figures */
  .proc-img img[src*="/process/"]{
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55)) brightness(1.0) !important;
    width: 70% !important; height: 70% !important;
  }
  .proc-card:hover .proc-img img[src*="/process/"]{
    filter: drop-shadow(0 16px 30px rgba(255,74,28,0.55)) !important;
  }
  /* Hide radial bg from hover on process cards — characters look cleaner without it */
  .proc-card:hover .proc-img{
    background: var(--bg-3) !important;
  }


  /* ====================================================================
     OVERFLOW + RESPONSIVE FIXES (May 2026)
     ==================================================================== */

  /* Desktop hero: headline was overflowing right edge.
     Constrain to fit + ensure it has breathing room. */
  .hero-full .hero-headline{
    font-size: clamp(48px, 11vw, 180px) !important;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding: 0 max(2vw, 8px);
  }
  .hero-content{
    padding: clamp(110px, 12vw, 170px) clamp(20px, 4vw, 64px) clamp(36px, 5vw, 64px) !important;
    max-width: 100vw;
    overflow: hidden;
  }

  /* Kanji glyph: was overflowing card on mobile */
  .kanji-card{
    overflow: hidden !important;
  }
  .kanji-card .glyph{
    max-width: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  /* Tablet ≤ 980 */
  @media (max-width: 980px){
    .hero-full .hero-headline{
      font-size: clamp(40px, 10vw, 110px) !important;
    }
    .hero-bottom{
      grid-template-columns: 1fr !important;
      gap: 14px !important;
    }
    .hero-bottom .ticker-row{
      justify-content: flex-start !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 6px !important;
    }
    .hero-bottom .scroll-cue{ justify-self: flex-start !important; }
  }

  /* Mobile ≤ 720 — fully reflow hero */
  @media (max-width: 720px){
    .hero.hero-full{
      min-height: auto !important;
    }
    .hero-content{
      padding: 100px 18px 32px !important;
      gap: 28px;
      justify-content: flex-start !important;
    }
    .hero-top-meta{
      grid-template-columns: 1fr !important;
      gap: 18px !important;
    }
    .hero-top-meta .right{ text-align: left !important; }
    .hero-top-meta .label{ font-size: 10px !important;}
    .hero-top-meta .val{ font-size: 13px !important; }
    .hero-full .hero-headline{
      font-size: clamp(40px, 13vw, 64px) !important;
      letter-spacing: -0.03em !important;
      line-height: 0.96 !important;
      margin: 24px 0 !important;
      padding: 0 !important;
      text-align: left !important;
    }
    .hero-bottom{
      padding-top: 18px !important;
    }
    .hero-bottom .live,
    .hero-bottom .ticker-row span{
      font-size: 10px !important;
      letter-spacing: 0.12em !important;
    }

    /* About kanji card on mobile */
    .kanji-card{
      aspect-ratio: 5/6 !important;
      padding: 22px !important;
    }
    .kanji-card .glyph{
      font-size: 240px !important;
      top: -6% !important;
      right: -16% !important;
      line-height: 0.85 !important;
    }
    .kanji-card .kc-mean{ font-size: 18px !important; }
    .kanji-card .kc-quote{ font-size: 13px !important; }

    /* About-side text */
    .about-side p{ font-size: 15px !important; }
    .about-stats{ grid-template-columns: 1fr 1fr !important; gap: 12px !important;}
    .about-stats .stat .num{ font-size: 32px !important;}
    .about-stats .stat .lbl{ font-size: 10px !important;}

    /* Services list rows on mobile */
    .services{ padding: 56px 18px !important; }
    .services-head{ grid-template-columns: 1fr !important; gap: 18px !important; margin-bottom: 32px !important;}
    .services-head h2{ font-size: clamp(32px, 9vw, 48px) !important;}
    .services-head .right p{ font-size: 14px !important;}
    .svc-row{
      grid-template-columns: 50px 1fr !important;
      gap: 14px !important;
      padding: 20px 0 !important;
    }
    .svc-row .num{ font-size: 10px !important;}
    .svc-row h3{ font-size: 22px !important;}
    .svc-row .desc, .svc-row .svc-tags, .svc-arrow, .svc-row .hover-img{ display: none !important;}

    /* Process cards */
    .process{ padding: 56px 18px !important; }
    .process-head{ grid-template-columns: 1fr !important; gap: 18px !important; margin-bottom: 32px !important;}
    .process-head h2{ font-size: clamp(32px, 9vw, 48px) !important;}
    .proc-grid{ grid-template-columns: 1fr !important; }
    .proc-card .body{ padding: 22px 18px !important;}
    .proc-card h3{ font-size: 19px !important;}

    /* Why section */
    .why{ padding: 56px 18px !important;}
    .why-grid{ grid-template-columns: 1fr !important; gap: 32px !important;}
    .why-left h2{ font-size: clamp(28px, 8vw, 44px) !important;}
    .why-right{ grid-template-columns: 1fr !important;}
    .why-card{ min-height: auto !important; padding: 22px 18px !important;}

    /* Testimonial */
    .testi{ padding: 56px 18px !important;}
    .testi-inner{ grid-template-columns: 1fr !important; gap: 28px !important;}
    .testi-left h2{ font-size: clamp(28px, 8vw, 40px) !important;}
    .testi-q{ font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.22 !important;}
    .quote-mark{ font-size: 96px !important;}
    .testi-meta{ flex-direction: column !important; align-items: flex-start !important; gap: 14px !important;}

    /* Insights / blog teaser */
    .insights{ padding: 56px 18px !important;}
    .insights-head{ grid-template-columns: 1fr !important; gap: 18px !important; align-items: flex-start !important;}
    .insights-head h2{ font-size: clamp(32px, 9vw, 48px) !important;}
    .insights-head .btn{ align-self: flex-start;}
    .ins-grid{ grid-template-columns: 1fr !important; gap: 14px !important;}
    .ins-card h3{ font-size: 18px !important;}

    /* CTA bar */
    .cta-bar{ padding: 56px 18px !important;}
    .cta-card{
      grid-template-columns: 1fr !important;
      padding: 36px 24px !important;
      gap: 24px !important;
      border-radius: 14px !important;
    }
    .cta-card h2{ font-size: clamp(32px, 9vw, 48px) !important;}
    .cta-card::before{ font-size: 200px !important; bottom: -10% !important; left: -10% !important; }
    .cta-meta{ text-align: left !important;}
    .cta-meta .item{ font-size: 10px !important; padding: 12px 0 !important;}

    /* Footer */
    footer{ padding: 56px 18px 24px !important;}
    .foot-grid{ grid-template-columns: 1fr !important; gap: 28px !important;}
    .foot-brand .tag{ font-size: 24px !important;}
    .foot-bottom{
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
      font-size: 10px !important;
    }
    .foot-bottom a{ margin: 0 14px 0 0 !important;}
  }

  /* Very small ≤ 380 */
  @media (max-width: 380px){
    .hero-full .hero-headline{ font-size: 40px !important;}
    h2{ font-size: 28px !important;}
    .ph-grid h1{ font-size: 44px !important;}
  }


  /* Desktop hero headline — strict no-overflow */
  .hero-full .hero-headline{
    font-size: clamp(48px, 9vw, 150px) !important;
    max-width: min(1280px, 92vw);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 4vw !important;
  }
  .hero-full .hero-headline .hero-line{
    display: block;
    overflow: hidden;
  }
  .hero-content{
    overflow: hidden !important;
  }


  /* Hero headline — bigger again, two clean lines */
  .hero-full .hero-headline{
    font-size: clamp(64px, 13vw, 220px) !important;
    max-width: min(1600px, 96vw) !important;
    padding: 0 2vw !important;
    line-height: 0.92 !important;
  }
  @media (max-width: 720px){
    .hero-full .hero-headline{
      font-size: clamp(56px, 16vw, 96px) !important;
    }
  }


  /* Hero headline: descender of 'y.' was being clipped by overflow:hidden.
     Give the line container breathing room and remove the clip. */
  .hero-full .hero-headline{
    line-height: 1.0 !important;
    padding: 0.12em 2vw 0.18em !important;
  }
  .hero-full .hero-headline .hero-line{
    overflow: visible !important;
    padding-bottom: 0.05em;
  }
  .hero-content{
    overflow: visible !important;
  }
  .hero.hero-full{ overflow: hidden; }  /* keep video clipped to section */


  /* Mobile hero — clean compact layout */
  @media (max-width: 720px){
    .hero.hero-full{
      min-height: 100svh !important;
    }
    .hero-content{
      padding: 96px 18px 28px !important;
      gap: 24px !important;
      justify-content: space-between !important;
    }
    .hero-full .hero-headline{
      font-size: clamp(48px, 14vw, 84px) !important;
      line-height: 1.0 !important;
      padding: 0.08em 0 0.16em !important;
      letter-spacing: -0.035em !important;
      margin: 12px 0 !important;
    }
    .hero-bottom{
      padding-top: 16px !important;
      gap: 10px !important;
      border-top: 1px solid rgba(242,239,233,0.14) !important;
    }
    .hero-bottom .live{
      font-size: 10px !important;
      letter-spacing: 0.12em !important;
    }
    .hero-bottom .ticker-row{
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 6px !important;
    }
    .hero-bottom .ticker-row span{
      font-size: 10px !important;
      letter-spacing: 0.12em !important;
    }
    .hero-bottom .scroll-cue{
      font-size: 10px !important;
      margin-top: 4px;
    }
  }

  @media (max-width: 720px){
    .hero.hero-full{ min-height: auto !important; }
    .hero-content{
      min-height: 100svh;
      padding: 96px 18px 28px !important;
      justify-content: space-between !important;
      gap: 24px !important;
    }
    .hero-full .hero-headline{
      margin: auto 0 !important;
      text-align: left !important;
    }
  }


  /* Process cards — brighter icons in default state, less dim */
  .proc-img img[src*="/process/"]{
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55)) brightness(1.6) contrast(1.05) !important;
    width: 72% !important; height: 72% !important;
    opacity: 1 !important;
  }
  .proc-card{
    background: var(--bg-2) !important;
  }
  .proc-card .proc-img{
    background: linear-gradient(180deg, #181818 0%, #0F0F0F 100%) !important;
  }
  .proc-card:hover .proc-img img[src*="/process/"]{
    filter: drop-shadow(0 16px 30px rgba(255,74,28,0.55)) brightness(1.8) contrast(1.1) !important;
  }
  .proc-card:hover .proc-img{
    background: radial-gradient(ellipse at center, rgba(255,74,28,0.18) 0%, #0F0F0F 75%) !important;
  }


  /* Lang toggle (clickable) */
  .lang-toggle{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--f-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .lang-toggle .lang-btn{
    background: transparent;
    border: 0;
    padding: 6px 4px;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    letter-spacing: 0.16em;
    transition: color .2s;
  }
  .lang-toggle .lang-btn:hover{ color: var(--ink); }
  .lang-toggle .lang-btn.on{ color: var(--orange); font-weight: 500;}
  .lang-toggle .lang-sep{ color: var(--muted-2); opacity: 0.5;}


  /* Scroll-aware header */
  .top{
    transition: transform .4s cubic-bezier(.2,.7,.2,1), background .25s, padding .25s, box-shadow .3s;
    will-change: transform;
  }
  .top.is-scrolled{
    background: rgba(10,10,10,0.92);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  }
  .top.is-scrolled .top-row{
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .top.is-hidden{
    transform: translateY(-100%);
  }


  /* Header scrolls with page */
  .top{
    position: absolute !important;
    top: 0; left: 0; right: 0;
    transform: none !important;
  }
  .top.is-hidden{ transform: none !important; }


  /* ====================================================================
     GLASSMORPHISM + EXTRA PARALLAX
     ==================================================================== */

  /* Glass surfaces — apply to common cards */
  .ins-card, .post, .case, .v-card, .method-item, .price-card,
  .why-card, .proc-card, .faq-q, .form-card, .kanji-card, .info-block,
  .legal-content .info-block, .sitemap-col, .help-card, .mod, .cta-meta .item,
  .stats .s-item{
    background: rgba(26, 26, 26, 0.55) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(242,239,233,0.08);
    transition: background .3s, border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  }
  .ins-card:hover, .post:hover, .case:hover, .v-card:hover,
  .method-item:hover, .price-card:hover, .why-card:hover{
    background: rgba(40,40,40,0.65) !important;
    border-color: rgba(255,74,28,0.35);
  }

  /* Featured glass card — orange tint */
  .price-card.featured{
    background: linear-gradient(135deg, rgba(255,74,28,0.18), rgba(255,74,28,0.06)) !important;
    border-color: rgba(255,74,28,0.45) !important;
    backdrop-filter: blur(20px);
  }

  /* Glass header on scroll */
  .top.is-scrolled{
    background: rgba(10,10,10,0.55) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(242,239,233,0.12);
  }

  /* Mobile drawer with glass */
  .mobile-drawer{
    background: rgba(8,8,8,0.85) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
  }

  /* Floating glass orbs in background of dark sections */
  .process, .why, .insights, .legal-body, .price-strip, .builder-section{
    position: relative;
    overflow: hidden;
  }
  .process::before, .why::before, .insights::before,
  .price-strip::before, .builder-section::before{
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,74,28,0.18), transparent 60%);
    filter: blur(40px);
    top: -200px; left: -200px;
    pointer-events: none;
    z-index: 0;
    animation: orb-drift 22s ease-in-out infinite;
  }
  .process::after, .why::after, .insights::after{
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80,80,255,0.10), transparent 65%);
    filter: blur(50px);
    bottom: -150px; right: -150px;
    pointer-events: none;
    z-index: 0;
    animation: orb-drift 28s ease-in-out infinite reverse;
  }
  @keyframes orb-drift{
    0%,100% { transform: translate(0,0) scale(1); opacity: 0.7;}
    50%     { transform: translate(80px, -50px) scale(1.15); opacity: 1;}
  }
  .process > *, .why > *, .insights > *,
  .price-strip > *, .builder-section > *{ position: relative; z-index: 1;}

  /* Parallax tilt for cards */
  .proc-card, .v-card, .price-card, .ins-card, .post{
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s;
  }

  /* Subtle floating animation for kanji card */
  .kanji-card{
    animation: card-float 8s ease-in-out infinite;
  }
  @keyframes card-float{
    0%,100% { transform: translateY(0);}
    50%     { transform: translateY(-6px);}
  }

  /* Better hover lift */
  .ins-card:hover, .post:hover{
    transform: translateY(-8px) !important;
    box-shadow: 0 30px 70px -20px rgba(255,74,28,0.3), 0 10px 30px rgba(0,0,0,0.6) !important;
  }

  /* Eyebrow with pulsing line */
  .eyebrow{
    position: relative;
  }

  /* Animated underline on links */
  .legal-content a, .foot-col a, footer .foot-bottom a{
    position: relative;
  }


  /* CTA meta items — restore transparent borders on orange card */
  .cta-meta .item{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 0 !important;
  }
  .cta-meta .item:last-child{ border-bottom: 0 !important;}


/* ============================================================
   PAGE-SPECIFIC STYLES (extracted from subpages for WP theme)
   ============================================================ */


/* ===== from services.html ===== */

  /* ===== Services page ===== */
  .page-hero{ padding: clamp(120px, 11vw, 170px) var(--pad-x) clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line);}
  .ph-grid{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end;}
  .ph-grid h1{ font-size: clamp(56px, 9vw, 160px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 500;}
  .ph-grid h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .ph-grid .right p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 460px;}
  .crumbs{ display:flex; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px;}
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}

  /* ===== Services grid (6 cards, alternating layout, light theme cards on dark bg) ===== */
  .svc-section{ padding: clamp(64px, 8vw, 120px) var(--pad-x); background: var(--bg);}
  .svc-section-head{ max-width: 1680px; margin: 0 auto 56px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; flex-wrap: wrap;}
  .svc-section-head h2{ font-size: clamp(40px, 5.6vw, 88px); line-height: 1; letter-spacing: -0.04em; font-weight: 500;}
  .svc-section-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .svc-section-head .meta{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);}

  .svc-list-v2{ max-width: 1680px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;}
  .svc-card{
    display: grid;
    grid-template-columns: 0.9fr 1.2fr 1fr;
    gap: clamp(20px, 3vw, 48px);
    background: var(--bg-2);
    border-radius: var(--radius);
    padding: clamp(28px, 3vw, 44px);
    align-items: center;
    transition: background .3s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
    border: 1px solid var(--line);
  }
  .svc-card:hover{
    transform: translateY(-2px);
    background: var(--bg-3);
    border-color: rgba(255,74,28,0.4);
    box-shadow: 0 24px 60px -20px rgba(255,74,28,0.25);
  }
  .svc-card.flip{ grid-template-columns: 1fr 1.2fr 0.9fr; }
  .svc-card.flip .svc-illo{ order: 3; }
  .svc-card.flip .svc-meta{ order: 1; }
  .svc-card.flip .svc-body{ order: 2; }

  .svc-illo{
    aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
    background: var(--bg);
    display: grid; place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    position: relative;
  }
  .svc-illo img{ width: 70%; height: 70%; object-fit: contain;}
  .svc-illo .corner-mark{
    position: absolute;
    top: 12px; right: 14px;
    font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
  }
  .svc-illo.has-glass img{ filter: invert(1) hue-rotate(180deg);}

  .svc-body{ display: flex; flex-direction: column; gap: 12px;}
  .svc-body .num{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--orange);
  }
  .svc-body .num::before{
    content: 'IIII '; color: var(--orange);
    letter-spacing: -0.1em; margin-right: 6px;
  }
  .svc-body h3{
    font-size: clamp(26px, 2.8vw, 42px);
    font-weight: 500; letter-spacing: -0.03em; line-height: 1.0;
    color: var(--ink);
  }
  .svc-body h3 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .svc-body p{ font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 440px;}

  .svc-meta{
    display: flex; flex-direction: column; gap: 16px;
    align-items: flex-start;
  }
  .svc-tags-v2{ display: flex; flex-wrap: wrap; gap: 6px;}
  .svc-tags-v2 span{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; padding: 7px 12px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
  }
  .svc-cta{
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--orange); color: #fff;
    padding: 10px 18px;
    border-radius: 100px;
    font-family: var(--f-sans); font-weight: 500; font-size: 13px;
    transition: transform .25s, background .25s;
  }
  .svc-cta:hover{ transform: translate(2px, -2px); background: var(--orange-2);}
  .svc-cta svg{ width: 12px; height: 12px;}

  @media (max-width: 1000px){
    .svc-card, .svc-card.flip{ grid-template-columns: 1fr 1fr; gap: 24px;}
    .svc-meta{ grid-column: span 2; flex-direction: row; justify-content: space-between; align-items: center;}
    .svc-card.flip .svc-illo, .svc-card.flip .svc-body, .svc-card.flip .svc-meta{ order: unset;}
  }
  @media (max-width: 700px){
    .svc-card, .svc-card.flip{ grid-template-columns: 1fr;}
    .svc-meta{ grid-column: auto; flex-direction: column; align-items: flex-start; gap: 14px;}
    .svc-illo{ max-width: 260px;}
  }

  /* ============== PRICING ============== */
  .price-strip{
    background: var(--bg);
    padding: clamp(72px, 9vw, 140px) var(--pad-x);
    position: relative;
    overflow: hidden;
  }
  .price-bg-glyph{
    position: absolute;
    top: 5%;
    pointer-events: none; user-select: none;
    font-family: var(--f-serif);
    font-size: clamp(160px, 22vw, 320px);
    color: rgba(242,239,233,0.04);
    line-height: 0.9;
    letter-spacing: -0.03em;
  }
  .price-bg-glyph.left{ left: 3%;}
  .price-bg-glyph.right{ right: 3%;}

  .price-head{ max-width: 1100px; margin: 0 auto 48px; text-align: center; position: relative; z-index: 2;}
  .price-head .eyebrow{ justify-content: center; display: inline-flex;}
  .price-head .eyebrow::before{ display: none;}
  .price-head .eyebrow::after{ content: 'IIII · CENNÍK'; color: var(--orange); font-weight: 500;}
  .price-head h2{
    font-size: clamp(48px, 7vw, 104px);
    line-height: 1.0;
    font-weight: 500; letter-spacing: -0.04em;
    margin: 18px 0 18px;
  }
  .price-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .price-head .sub{ color: var(--muted); max-width: 560px; margin: 0 auto; font-size: 16px;}

  .billing-toggle{
    display: inline-flex; align-items: center; gap: 16px;
    margin-top: 32px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
  }
  .billing-switch{
    display: inline-flex;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: 4px;
  }
  .billing-switch button{
    background: transparent;
    border: 0;
    color: var(--muted);
    padding: 10px 22px;
    border-radius: 100px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s, color .25s;
  }
  .billing-switch button.on{ background: var(--orange); color: #fff;}
  .billing-discount{ color: var(--orange);}

  .price-grid{
    max-width: 1480px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative; z-index: 2;
  }
  .price-card{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px 28px;
    display: flex; flex-direction: column; gap: 22px;
    position: relative;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
  }
  .price-card:hover:not(.featured):not(.builder){
    transform: translateY(-4px);
    border-color: rgba(255,74,28,0.4);
    box-shadow: 0 30px 60px -20px rgba(255,74,28,0.25);
  }
  .price-card .ptop{
    display: flex; justify-content: space-between; align-items: center;
  }
  .price-card .ptype{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
  }
  .price-card .ptype::before{
    content: 'III '; color: var(--orange); letter-spacing: -0.1em;
  }
  .price-card .pbadge{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 5px;
  }
  .price-card .pbadge::before{ content: '✦'; color: var(--muted-2); font-size: 9px;}
  .price-card.featured{
    background: var(--bg-3);
    border-color: rgba(255,74,28,0.45);
  }
  .price-card.featured .pbadge{
    background: var(--orange); color: #fff; border-color: var(--orange);
  }
  .price-card.featured .pbadge::before{ color: rgba(255,255,255,0.7);}
  .price-card .ptier{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(28px, 2.6vw, 36px);
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1;
  }
  .price-card .ptier em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .price-card .pdesc{
    font-size: 14px; line-height: 1.55;
    color: var(--muted);
    min-height: 60px;
  }
  .price-card .budget-tag{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 12px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
    align-self: flex-start;
  }
  .price-card .budget-tag::before{ content: 'IIII · '; color: var(--orange); margin-right: 2px;}
  .price-card .pamount{
    display: flex; align-items: baseline; gap: 4px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin-top: 4px;
  }
  .price-card .pamount .pre{
    font-family: var(--f-mono);
    font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 6px;
  }
  .price-card .pamount .num{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(54px, 5.2vw, 76px);
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--ink);
  }
  .price-card .pamount .unit{
    font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em;
    color: var(--muted);
  }
  .price-card .setup{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: -10px;
  }
  .price-card .setup::before{ content: '+ '; color: var(--orange);}

  .price-card ul{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 14px;
    flex: 1;
  }
  .price-card ul li{
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 14px; line-height: 1.4;
    color: var(--ink);
  }
  .price-card ul li::before{
    content: '';
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 4px;
    background: var(--orange);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 2px;
  }
  .price-card .btn{ width: 100%; justify-content: space-between;}

  /* Builder card with its own visual */
  .price-card.builder .ptier em{ display: inline-block;}
  .price-card.builder .pamount .num{ font-size: clamp(48px, 4.8vw, 70px);}
  .price-card.builder ul li{ font-size: 13.5px;}

  @media (max-width: 1100px){
    .price-grid{ grid-template-columns: 1fr 1fr;}
  }
  @media (max-width: 640px){
    .price-grid{ grid-template-columns: 1fr;}
  }

  /* ============== BUILDER (custom growth stack) ============== */
  .builder-section{
    background: var(--bg);
    padding: clamp(72px, 9vw, 140px) var(--pad-x);
    border-top: 1px solid var(--line);
  }
  .builder-head{ max-width: 1680px; margin: 0 auto 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end;}
  .builder-head .eyebrow{ margin-bottom: 18px;}
  .builder-head h2{ font-size: clamp(40px, 5.2vw, 80px); letter-spacing: -0.04em; font-weight: 500; line-height: 0.95;}
  .builder-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .builder-head .right{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    text-align: right;
    max-width: 320px;
    justify-self: end;
    line-height: 1.6;
  }
  .builder-head .right b{ color: var(--orange); font-weight: 500;}

  .builder-grid{
    max-width: 1680px; margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 16px;
  }
  .modules{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mod{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    cursor: pointer;
    transition: border-color .25s, background .25s;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
  }
  .mod:hover{ background: var(--bg-3); border-color: var(--line-2);}
  .mod.on{ border-color: var(--orange); background: var(--bg-3);}
  .mod .mod-top{
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  }
  .mod .mod-top h4{
    font-size: 17px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
  }
  .mod .mod-price{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--orange); white-space: nowrap;
    text-transform: uppercase;
  }
  .mod p{
    font-size: 13px; line-height: 1.5;
    color: var(--muted);
    margin: 4px 0 0;
  }
  .mod .mod-code{
    margin-top: 8px;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted-2);
    text-align: right;
  }
  .mod .check{
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--line-2);
    display: grid; place-items: center;
    transition: background .2s, border-color .2s;
    margin-right: 4px;
  }
  .mod.on .check{
    background: var(--orange);
    border-color: var(--orange);
  }
  .mod .check::after{
    content: '';
    width: 12px; height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8l3 3 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0;
    transition: opacity .2s;
  }
  .mod.on .check::after{ opacity: 1;}

  .calc{
    background: #0A0A0A;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    display: flex; flex-direction: column; gap: 18px;
    color: var(--ink);
    position: sticky;
    top: 100px;
    align-self: start;
    overflow: hidden;
  }
  .calc-glyph{
    position: absolute;
    right: -4%; top: 4%;
    font-family: var(--f-serif);
    font-size: 220px;
    line-height: 1;
    color: rgba(255,74,28,0.18);
    pointer-events: none;
    user-select: none;
  }
  .calc-head{
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    position: relative;
  }
  .calc-head .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; margin-right: 6px;}
  .calc h3{
    font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--ink);
    position: relative;
  }
  .calc .calc-prompt{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted-2); text-transform: uppercase;
    border-top: 1px dashed rgba(242,239,233,0.18);
    border-bottom: 1px dashed rgba(242,239,233,0.18);
    padding: 12px 0;
    position: relative;
  }
  .calc-line{
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em;
    color: var(--muted);
    position: relative;
  }
  .calc-line.discount{ color: var(--orange);}
  .calc-total{
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px solid rgba(242,239,233,0.18);
    padding-top: 16px;
    position: relative;
  }
  .calc-total .lbl{
    display: flex; flex-direction: column;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted-2); text-transform: uppercase;
    line-height: 1.3;
  }
  .calc-total .lbl b{ color: var(--ink); font-size: 12px; font-weight: 500;}
  .calc-total .num{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -0.045em;
    line-height: 0.9;
    color: var(--ink);
  }
  .calc-total .num small{
    font-family: var(--f-mono); font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.06em;
    font-weight: 400;
    margin-left: 2px;
  }
  .calc .btn{ justify-content: space-between; position: relative;}
  .calc.disabled .btn{ opacity: 0.4; pointer-events: none;}

  @media (max-width: 900px){
    .builder-head{ grid-template-columns: 1fr; }
    .builder-head .right{ text-align: left; justify-self: start;}
    .builder-grid{ grid-template-columns: 1fr;}
    .modules{ grid-template-columns: 1fr;}
    .calc{ position: static;}
    .calc-glyph{ font-size: 140px;}
  }

  /* ============== FAQ ============== */
  .faq-section{ padding: clamp(64px, 8vw, 120px) var(--pad-x); background: var(--bg-2);}
  .faq-head{ max-width: 1680px; margin: 0 auto 40px; text-align: center;}
  .faq-head h2{ font-size: clamp(40px, 5.6vw, 88px); font-weight: 500; letter-spacing: -0.035em; margin-top: 14px;}
  .faq-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}

  .faq-tabs{ max-width: 1680px; margin: 0 auto 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
  .faq-tab{
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 18px 22px;
    cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    transition: background .25s, border-color .25s;
    text-align: left;
  }
  .faq-tab:hover{ background: var(--bg-3); border-color: rgba(255,74,28,0.4);}
  .faq-tab.on{ background: var(--orange); border-color: var(--orange); color: #fff;}
  .faq-tab .tab-ico{
    width: 38px; height: 38px;
    border-radius: 9px;
    background: var(--bg-3);
    color: var(--orange);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: background .25s;
  }
  .faq-tab.on .tab-ico{ background: rgba(255,255,255,0.15); color: #fff;}
  .faq-tab .tab-body b{ display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);}
  .faq-tab .tab-body small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted); margin-top: 2px; display: block;
  }
  .faq-tab.on .tab-body small{ color: rgba(255,255,255,0.8);}

  .faq-body{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 2fr; gap: 56px; align-items: start;}
  .faq-side{ display: flex; flex-direction: column; gap: 24px;}
  .faq-side .help-pill{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg); border: 1px solid var(--line);
    padding: 10px 16px;
    border-radius: 100px;
    align-self: flex-start;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .faq-side .help-pill::before{ content: 'IIII'; color: var(--orange); letter-spacing: -0.1em;}
  .faq-side h3{ font-size: clamp(40px, 5vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 0.95;}
  .faq-side .help-card{
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    max-width: 320px;
  }
  .faq-side .help-card .q{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }

  .faq-list{ display: flex; flex-direction: column; gap: 10px;}
  .faq-q{
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 28px;
    cursor: pointer;
    transition: background .25s, border-color .25s;
  }
  .faq-q.open{ background: #0A0A0A; border-color: var(--line);}
  .faq-q-head{ display: flex; justify-content: space-between; align-items: center; gap: 16px;}
  .faq-q-head .q-text{ font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; letter-spacing: -0.015em; color: var(--ink);}
  .faq-q.open .q-text{ color: var(--ink);}
  .faq-q .q-toggle{
    width: 28px; height: 28px;
    flex-shrink: 0;
    display: grid; place-items: center;
    color: var(--ink);
    transition: transform .25s, color .25s;
  }
  .faq-q.open .q-toggle{ color: var(--orange); transform: rotate(45deg);}
  .faq-q .q-body{
    max-height: 0; overflow: hidden;
    transition: max-height .35s cubic-bezier(.2,.7,.2,1), margin-top .35s;
    color: var(--muted);
    font-size: 15px; line-height: 1.6;
  }
  .faq-q.open .q-body{ max-height: 300px; margin-top: 12px;}

  @media (max-width: 1000px){
    .faq-tabs{ grid-template-columns: 1fr 1fr;}
    .faq-body{ grid-template-columns: 1fr; gap: 32px;}
  }
  @media (max-width: 600px){
    .faq-tabs{ grid-template-columns: 1fr;}
  }


/* ===== from portfolio.html ===== */

  .page-hero{
    padding: clamp(64px, 8vw, 120px) var(--pad-x) clamp(40px, 5vw, 80px);
    border-bottom: 1px solid var(--line);
  }
  .ph-grid{
    max-width: 1680px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }
  .ph-grid h1{
    font-size: clamp(56px, 9vw, 160px);
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-weight: 500;
  }
  .ph-grid h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .ph-grid .right p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 460px;}
  .crumbs{
    display:flex; gap: 10px; align-items: center;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 32px;
  }
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}

  /* Filters */
  .filters{
    padding: 32px var(--pad-x);
    border-bottom: 1px solid var(--line);
    display: flex; gap: 12px; flex-wrap: wrap;
    max-width: 1680px; margin: 0 auto;
  }
  .filter-pill{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 10px 16px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    background: transparent;
  }
  .filter-pill:hover{ background: rgba(10,10,10,0.04); }
  .filter-pill.active{ background: var(--ink); color: var(--on-dark); border-color: var(--ink);}
  .filter-pill .ct{
    margin-left: 6px; opacity: 0.5; font-weight: 400;
  }
  .filter-pill.active .ct{ opacity: 0.7;}

  /* Case grid */
  .cases{
    padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(64px, 8vw, 120px);
    max-width: 1680px; margin: 0 auto;
  }
  .case-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .case{
    display: flex; flex-direction: column;
    cursor: pointer;
    text-decoration: none; color: inherit;
  }
  .case.wide{ grid-column: span 2; }
  .case .case-media{
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-2);
    position: relative;
  }
  .case.wide .case-media{ aspect-ratio: 21/9; }
  .case .case-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,.61,.36,1);}
  .case:hover .case-media img{ transform: scale(1.04);}
  .case .case-tag{
    position: absolute; top: 16px; left: 16px;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 7px 12px;
    background: rgba(10,10,10,0.6);
    color: var(--on-dark);
    border-radius: 100px;
    backdrop-filter: blur(10px);
  }
  .case .case-result{
    position: absolute; bottom: 18px; left: 18px;
    background: var(--orange);
    color: #fff;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -0.035em;
    padding: 10px 18px;
    border-radius: 10px;
    line-height: 1;
  }
  .case .case-result em{ font-family: var(--f-serif); font-style: italic; font-weight: 400;}
  .case .case-result small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block; margin-top: 6px; opacity: 0.85;
    font-weight: 400;
  }
  .case .body{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
  }
  .case h3{
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
  .case .meta{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 8px;
  }
  .case .meta span{ color: var(--orange); margin-right: 8px;}
  .case .case-arrow{
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--ink); color: var(--on-dark);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s;
  }
  .case:hover .case-arrow{ background: var(--orange); transform: translate(3px, -3px);}
  @media (max-width: 900px){
    .case-grid{ grid-template-columns: 1fr; }
    .case.wide{ grid-column: auto;}
  }

  /* Methodology strip */
  .method{
    background: var(--bg-2);
    padding: clamp(56px, 6vw, 96px) var(--pad-x);
  }
  .method-grid{
    max-width: 1480px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: start;
  }
  .method-grid h2{
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 500;
    letter-spacing: -0.035em;
  }
  .method-grid h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .method-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
  .method-item{
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .method-item .n{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--orange); text-transform: uppercase;
  }
  .method-item h4{
    margin: 10px 0 6px;
    font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
  }
  .method-item p{ font-size: 13.5px; line-height: 1.55; color: var(--muted);}
  @media (max-width: 900px){
    .method-grid{ grid-template-columns: 1fr;}
    .method-list{ grid-template-columns: 1fr;}
  }
  .case.is-template{ cursor: default; pointer-events: none; opacity: 0.85;}
  .case.is-template .case-media{ background: var(--bg-3);}
  .case-placeholder{
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    background:
      repeating-linear-gradient(
        45deg,
        var(--bg-2),
        var(--bg-2) 12px,
        var(--bg-3) 12px,
        var(--bg-3) 24px
      );
  }
  .case-placeholder .ph-glyph{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(80px, 10vw, 140px);
    color: var(--muted-2);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .case-placeholder .ph-label{
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .empty-state{
    max-width: 680px;
    margin: 0 auto clamp(40px, 5vw, 64px);
    text-align: center;
  }
  .empty-state .eyebrow{ justify-content: center; display: inline-flex;}
  .empty-state .empty-h{
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 500;
    margin: 18px 0 14px;
  }
  .empty-state .empty-h em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .empty-state .empty-p{ color: var(--muted); font-size: 16px; line-height: 1.6;}


/* ===== from about.html ===== */

  .page-hero{ padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line);}
  .ph-grid{ max-width: 1680px; margin: 0 auto; display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end;}
  .ph-grid h1{ font-size: clamp(56px, 9vw, 160px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 500; margin:0;}
  .ph-grid h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .ph-grid .right p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 460px;}
  .crumbs{ display:flex; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px;}
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}

  /* Manifesto */
  .manifesto{ padding: clamp(64px, 8vw, 120px) var(--pad-x); }
  .manifesto-inner{ max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(40px, 6vw, 80px); align-items: center;}
  .manifesto-text{ display: flex; flex-direction: column; gap: 24px;}
  .mascot-card{
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, #181818, #0A0A0A);
    border: 1px solid var(--line);
  }
  .mascot-card img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,.61,.36,1);}
  .mascot-card:hover img{ transform: scale(1.04);}
  .mascot-card .mascot-tag{
    position: absolute;
    bottom: 18px; left: 18px; right: 18px;
    display: flex; justify-content: space-between; align-items: end;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    pointer-events: none;
  }
  .mascot-card .mascot-tag b{ color: var(--ink); font-weight: 500;}
  @media (max-width: 900px){
    .manifesto-inner{ grid-template-columns: 1fr; gap: 40px;}
    .mascot-card{ aspect-ratio: 1/1; max-width: 480px;}
  }
  .manifesto p.lead-big{
    font-size: clamp(28px, 3.4vw, 52px);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--ink);
    max-width: 1080px;
  }
  .manifesto p.lead-big em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .manifesto .sub{
    margin-top: 40px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    color: var(--muted);
    font-size: 17px; line-height: 1.6;
    max-width: 920px;
  }
  @media (max-width: 800px){ .manifesto .sub{ grid-template-columns: 1fr;} }

  /* Team */
  .team{ padding: clamp(64px, 8vw, 120px) var(--pad-x); background: var(--bg-2);}
  .team-head{ max-width: 1680px; margin: 0 auto 48px; display:flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;}
  .team-head h2{ font-size: clamp(36px, 4.8vw, 72px); letter-spacing: -0.04em; font-weight: 500;}
  .team-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .team-grid{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
  .member{ display: flex; flex-direction: column;}
  .member .ph{
    aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
    background: var(--orange); position: relative;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .member:hover .ph{ transform: translateY(-4px);}
  .member .ph img{ width: 100%; height: 100%; object-fit: cover; transition: filter .35s, opacity .35s;}
  .member:hover .ph img{ filter: grayscale(0); }
  .member .ph::after{
    content: '';
    position: absolute; inset: 0;
    background: var(--orange);
    mix-blend-mode: hard-light;
    opacity: 0.3;
    pointer-events: none;
    transition: opacity .3s;
  }
  .member:hover .ph::after{ opacity: 0;}
  .member .body{ padding: 18px 4px; }
  .member b{ display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.015em;}
  .member small{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase;}
  @media (max-width: 900px){ .team-grid{ grid-template-columns: 1fr 1fr;} }

  /* Values */
  .values{ padding: clamp(64px, 8vw, 120px) var(--pad-x); }
  .values-head{ max-width: 1680px; margin: 0 auto 56px; display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;}
  .values-head h2{ font-size: clamp(36px, 4.8vw, 72px); letter-spacing: -0.04em; font-weight: 500;}
  .values-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .values-head .right p{ color: var(--muted); max-width: 460px;}
  .v-grid{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;}
  .v-card{
    background: var(--bg-2);
    border-radius: var(--radius);
    padding: 32px 28px 28px;
    display: flex; flex-direction: column; gap: 16px;
    min-height: 280px;
  }
  .v-card .n{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--orange); text-transform: uppercase;}
  .v-card h3{ font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.025em;}
  .v-card h3 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .v-card p{ font-size: 14px; line-height: 1.6; color: var(--muted);}
  @media (max-width: 800px){
    .v-grid{ grid-template-columns: 1fr; }
    .values-head{ grid-template-columns: 1fr;}
  }

  /* Numbers strip */
  .nums{ padding: clamp(64px, 8vw, 120px) var(--pad-x); background: var(--bg-2); color: var(--ink);}
  .nums-inner{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
  .nb{ display: flex; flex-direction: column; gap: 14px;}
  .nb .nm{ font-family: var(--f-sans); font-weight: 500; font-size: clamp(60px, 7vw, 120px); line-height: 1; letter-spacing: -0.05em;}
  .nb .nm em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .nb .lb{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line);}
  @media (max-width: 900px){ .nums-inner{ grid-template-columns: 1fr 1fr; gap: 32px;} }


/* ===== from contact.html ===== */

  .contact-hero{
    padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(40px, 5vw, 64px);
  }
  .ch-inner{
    max-width: 1680px; margin: 0 auto;
  }
  .crumbs{
    display:flex; gap: 10px; align-items: center;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 24px;
  }
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}
  .ch-inner h1{
    font-size: clamp(56px, 11vw, 200px);
    line-height: 0.92;
    letter-spacing: -0.05em;
    font-weight: 500;
    margin: 0;
  }
  .ch-inner h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}

  /* Contact body */
  .contact-body{
    padding: 0 var(--pad-x) clamp(64px, 8vw, 120px);
  }
  .contact-grid{
    max-width: 1680px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }

  /* Form */
  .form-card{
    background: var(--bg-2);
    border-radius: var(--radius);
    padding: clamp(28px, 4vw, 56px);
    position: relative;
  }
  .form-card .eyebrow{ margin-bottom: 24px;}
  .form-card h2{
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.035em;
    font-weight: 500;
    margin-bottom: 36px;
  }
  .form-card h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .field{
    margin-bottom: 24px;
  }
  .field label{
    display: block;
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 8px;
  }
  .field input, .field textarea, .field select{
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    padding: 12px 0;
    font-family: var(--f-sans);
    font-size: 18px;
    color: var(--ink);
    outline: none;
    transition: border-color .2s;
  }
  .field input:focus, .field textarea:focus, .field select:focus{
    border-color: var(--orange);
  }
  .field textarea{ resize: vertical; min-height: 80px;}
  .field input::placeholder, .field textarea::placeholder{ color: var(--muted-2);}

  .chips{
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 4px;
  }
  .chip{
    font-family: var(--f-sans);
    font-size: 13.5px;
    padding: 9px 16px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
    transition: background .2s, color .2s, border-color .2s;
  }
  .chip:hover{ background: rgba(10,10,10,0.04);}
  .chip.on{ background: var(--ink); color: var(--on-dark); border-color: var(--ink);}

  .field-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  @media (max-width: 600px){
    .field-row{ grid-template-columns: 1fr;}
  }

  .form-submit{
    margin-top: 32px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
  }
  .form-submit small{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--muted); text-transform: uppercase;
  }

  /* Side info */
  .side{
    display: flex; flex-direction: column; gap: 32px;
  }
  .info-block{
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
  .info-block h4{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 14px;
    font-weight: 500;
  }
  .info-block a, .info-block p{
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.3;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .info-block .small{
    font-size: 14px;
    color: var(--muted);
    font-weight: 400;
    margin-top: 4px;
  }
  .info-portrait{
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--orange);
    margin-top: 12px;
  }
  .info-portrait img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.95;}

  /* FAQ */
  .faq{
    padding: clamp(56px, 7vw, 96px) var(--pad-x);
    background: var(--bg-2);
  }
  .faq-grid{
    max-width: 1480px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    align-items: start;
  }
  .faq-grid h2{
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 500;
    letter-spacing: -0.035em;
  }
  .faq-grid h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .faq-list .q{
    border-top: 1px solid var(--line);
    padding: 24px 0;
    cursor: pointer;
  }
  .faq-list .q:last-child{ border-bottom: 1px solid var(--line);}
  .faq-list .q-head{
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
  }
  .faq-list .q-head .q-text{
    font-family: var(--f-sans);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }
  .faq-list .q-toggle{
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-2);
    display: grid; place-items: center;
    transition: transform .2s, background .2s;
    flex-shrink: 0;
  }
  .faq-list .q.open .q-toggle{ background: var(--orange); border-color: var(--orange); transform: rotate(45deg); color: #fff;}
  .faq-list .q-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.2,.7,.2,1), margin-top .35s;
    color: var(--muted);
    font-size: 15px; line-height: 1.6;
  }
  .faq-list .q.open .q-body{
    max-height: 300px;
    margin-top: 16px;
  }

  @media (max-width: 900px){
    .contact-grid{ grid-template-columns: 1fr;}
    .faq-grid{ grid-template-columns: 1fr;}
  }


/* ===== from contact.html ===== */

  /* Refined contact page */
  .contact-hero h1{
    font-size: clamp(72px, 12vw, 200px) !important;
    line-height: 0.92 !important;
  }
  .form-card{
    background: linear-gradient(180deg, rgba(28,28,28,0.7), rgba(15,15,15,0.5)) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
  }
  .form-card .eyebrow{ margin-bottom: 18px; font-size: 11px;}
  .form-card h2{
    font-size: clamp(28px, 2.6vw, 38px) !important;
    margin-bottom: 28px !important;
  }
  .field{ margin-bottom: 28px;}
  .field label{
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
  }
  .field input, .field textarea{
    font-size: 17px !important;
    padding: 12px 0 !important;
    border-bottom-width: 1px !important;
  }
  .chip{
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.12) !important;
    transition: all .25s !important;
  }
  .chip:hover{ background: rgba(255,74,28,0.10) !important; border-color: rgba(255,74,28,0.3) !important;}
  .chip.on{
    background: var(--orange) !important;
    color: #fff !important;
    border-color: var(--orange) !important;
  }
  .form-submit small{ font-size: 10px !important;}

  /* Side info — turn each block into glass card */
  .side{ gap: 12px !important;}
  .info-block{
    background: rgba(28,28,28,0.55) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 22px 24px !important;
    transition: border-color .3s, background .3s;
  }
  .info-block:hover{ border-color: rgba(255,74,28,0.3);}
  .info-block h4{
    margin-bottom: 10px !important;
    font-family: var(--f-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    color: var(--orange) !important;
  }
  .info-block a, .info-block p{
    font-size: 18px !important;
    font-weight: 500 !important;
  }
  .info-block .small{
    margin-top: 6px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }


/* ===== from blog.html ===== */

  .page-hero{ padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line);}
  .ph-grid{ max-width: 1680px; margin: 0 auto; display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end;}
  .ph-grid h1{ font-size: clamp(56px, 9vw, 160px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 500; margin:0;}
  .ph-grid h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .ph-grid .right p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 460px;}
  .crumbs{ display:flex; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px;}
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}

  .filters{ padding: 32px var(--pad-x); border-bottom: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; max-width: 1680px; margin: 0 auto;}
  .filter-pill{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 100px; color: var(--ink); cursor: pointer; transition: all .2s; background: transparent;}
  .filter-pill:hover{ background: rgba(10,10,10,0.04);}
  .filter-pill.active{ background: var(--ink); color: var(--on-dark); border-color: var(--ink);}

  .featured-post{
    padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(32px, 4vw, 64px);
  }
  .fp-inner{ max-width: 1680px; margin: 0 auto; display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 4vw, 80px); align-items: center;}
  .fp-img{ aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--bg-2);}
  .fp-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,.61,.36,1);}
  .fp-inner:hover .fp-img img{ transform: scale(1.04);}
  .fp-meta{ display: flex; gap: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px;}
  .fp-meta .cat{ color: var(--orange);}
  .fp-side h2{ font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;}
  .fp-side h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .fp-side p{ color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 18px; max-width: 480px;}
  .fp-side .btn{ margin-top: 28px;}
  @media (max-width: 900px){ .fp-inner{ grid-template-columns: 1fr;} }

  /* List */
  .post-list{ padding: clamp(48px, 6vw, 96px) var(--pad-x); border-top: 1px solid var(--line);}
  .pl-inner{ max-width: 1680px; margin: 0 auto;}
  .pl-head{ display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px;}
  .pl-head h2{ font-size: clamp(28px, 3vw, 44px); font-weight: 500; letter-spacing: -0.03em;}
  .pl-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
  .post{ display: flex; flex-direction: column; cursor: pointer; background: var(--bg-2); border-radius: var(--radius); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1);}
  .post:hover{ transform: translateY(-4px);}
  .post .img{ aspect-ratio: 16/10; overflow: hidden;}
  .post .img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1);}
  .post:hover .img img{ transform: scale(1.05);}
  .post .body{ padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1;}
  .post .meta{ display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);}
  .post .meta .cat{ color: var(--orange);}
  .post h3{ font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500;}
  .post .excerpt{ font-size: 13.5px; line-height: 1.55; color: var(--muted);}
  .post .read{ margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;}
  .post .read .arrow{ width: 22px; height: 22px; border-radius:50%; background: var(--ink); color:#fff; display: inline-grid; place-items: center; transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s;}
  .post:hover .read .arrow{ background: var(--orange); transform: translate(2px, -2px);}
  .post .read .arrow svg{ width:10px; height:10px;}
  @media (max-width: 900px){ .pl-grid{ grid-template-columns: 1fr;} }
  .post.is-template{ pointer-events: none; opacity: 0.85;}
  .post-placeholder{
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    background:
      repeating-linear-gradient(
        45deg,
        var(--bg-2),
        var(--bg-2) 10px,
        var(--bg-3) 10px,
        var(--bg-3) 20px
      );
  }
  .post-placeholder .ph-glyph{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(48px, 6vw, 80px);
    color: var(--muted-2);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .post-placeholder .ph-label{
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .post .img{ position: relative;}

  .empty-state{
    max-width: 680px;
    margin: 0 auto clamp(32px, 5vw, 56px);
    text-align: center;
  }
  .empty-state .eyebrow{ justify-content: center; display: inline-flex;}
  .empty-state .empty-h{
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 500;
    margin: 18px 0 14px;
  }
  .empty-state .empty-h em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .empty-state .empty-p{ color: var(--muted); font-size: 16px; line-height: 1.6;}


/* ===== from privacy.html ===== */

  .legal-hero{ padding: clamp(120px, 11vw, 170px) var(--pad-x) clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line);}
  .legal-hero-inner{ max-width: 1100px; margin: 0 auto;}
  .legal-hero h1{ font-size: clamp(48px, 7vw, 100px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; margin: 0;}
  .legal-hero h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .legal-hero .meta{
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 24px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-hero .meta b{ color: var(--ink); font-weight: 500;}
  .legal-body{ padding: clamp(48px, 6vw, 96px) var(--pad-x); }
  .legal-grid{ max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start;}
  .legal-toc{ position: sticky; top: 100px;}
  .legal-toc h5{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
  }
  .legal-toc a{
    display: block;
    font-family: var(--f-sans);
    font-size: 13.5px;
    color: var(--muted);
    padding: 8px 0;
    border-top: 1px solid var(--line);
    transition: color .2s;
  }
  .legal-toc a:hover{ color: var(--orange);}
  .legal-content h2{
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.025em;
    font-weight: 500;
    margin: 48px 0 14px;
    scroll-margin-top: 100px;
  }
  .legal-content h2:first-child{ margin-top: 0;}
  .legal-content h2 .num{
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--orange);
    margin-right: 12px;
  }
  .legal-content h3{
    font-size: 16px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink);
    margin: 20px 0 8px;
  }
  .legal-content p, .legal-content li{
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 14px;
  }
  .legal-content ul{
    padding-left: 0;
    list-style: none;
    margin: 0 0 18px;
  }
  .legal-content ul li{
    position: relative;
    padding-left: 22px;
  }
  .legal-content ul li::before{
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 1px;
    background: var(--orange);
  }
  .legal-content a{ color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s, color .2s;}
  .legal-content a:hover{ color: var(--orange); border-color: var(--orange);}
  .legal-content .info-block{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 24px 0;
  }
  .legal-content .info-block h4{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--orange);
    margin: 0 0 12px;
    font-weight: 500;
  }
  .legal-content .info-block dl{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 24px;
    margin: 0;
  }
  .legal-content .info-block dt{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-content .info-block dd{
    margin: 0;
    font-size: 14.5px;
    color: var(--ink);
  }

  /* Sitemap */
  .sitemap-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
  }
  .sitemap-col{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .sitemap-col h3{
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .sitemap-col h3 .num{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--orange); margin-right: 10px;
  }
  .sitemap-col ul{ padding: 0; margin: 0; list-style: none;}
  .sitemap-col ul li{ padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .sitemap-col ul li::before{ display: none;}
  .sitemap-col ul li:last-child{ border-bottom: 0;}
  .sitemap-col a{
    display: flex; justify-content: space-between; align-items: center;
    color: var(--ink) !important;
    border: 0 !important;
    font-size: 14px;
    font-family: var(--f-sans);
  }
  .sitemap-col a small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .sitemap-col a:hover{ color: var(--orange) !important;}

  @media (max-width: 900px){
    .legal-grid{ grid-template-columns: 1fr; gap: 32px;}
    .legal-toc{ position: static;}
    .sitemap-grid{ grid-template-columns: 1fr;}
    .legal-content .info-block dl{ grid-template-columns: 1fr;}
  }


/* ===== from cookies.html ===== */

  .legal-hero{ padding: clamp(120px, 11vw, 170px) var(--pad-x) clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line);}
  .legal-hero-inner{ max-width: 1100px; margin: 0 auto;}
  .legal-hero h1{ font-size: clamp(48px, 7vw, 100px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; margin: 0;}
  .legal-hero h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .legal-hero .meta{
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 24px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-hero .meta b{ color: var(--ink); font-weight: 500;}
  .legal-body{ padding: clamp(48px, 6vw, 96px) var(--pad-x); }
  .legal-grid{ max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start;}
  .legal-toc{ position: sticky; top: 100px;}
  .legal-toc h5{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
  }
  .legal-toc a{
    display: block;
    font-family: var(--f-sans);
    font-size: 13.5px;
    color: var(--muted);
    padding: 8px 0;
    border-top: 1px solid var(--line);
    transition: color .2s;
  }
  .legal-toc a:hover{ color: var(--orange);}
  .legal-content h2{
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.025em;
    font-weight: 500;
    margin: 48px 0 14px;
    scroll-margin-top: 100px;
  }
  .legal-content h2:first-child{ margin-top: 0;}
  .legal-content h2 .num{
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--orange);
    margin-right: 12px;
  }
  .legal-content h3{
    font-size: 16px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink);
    margin: 20px 0 8px;
  }
  .legal-content p, .legal-content li{
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 14px;
  }
  .legal-content ul{
    padding-left: 0;
    list-style: none;
    margin: 0 0 18px;
  }
  .legal-content ul li{
    position: relative;
    padding-left: 22px;
  }
  .legal-content ul li::before{
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 1px;
    background: var(--orange);
  }
  .legal-content a{ color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s, color .2s;}
  .legal-content a:hover{ color: var(--orange); border-color: var(--orange);}
  .legal-content .info-block{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 24px 0;
  }
  .legal-content .info-block h4{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--orange);
    margin: 0 0 12px;
    font-weight: 500;
  }
  .legal-content .info-block dl{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 24px;
    margin: 0;
  }
  .legal-content .info-block dt{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-content .info-block dd{
    margin: 0;
    font-size: 14.5px;
    color: var(--ink);
  }

  /* Sitemap */
  .sitemap-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
  }
  .sitemap-col{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .sitemap-col h3{
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .sitemap-col h3 .num{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--orange); margin-right: 10px;
  }
  .sitemap-col ul{ padding: 0; margin: 0; list-style: none;}
  .sitemap-col ul li{ padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .sitemap-col ul li::before{ display: none;}
  .sitemap-col ul li:last-child{ border-bottom: 0;}
  .sitemap-col a{
    display: flex; justify-content: space-between; align-items: center;
    color: var(--ink) !important;
    border: 0 !important;
    font-size: 14px;
    font-family: var(--f-sans);
  }
  .sitemap-col a small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .sitemap-col a:hover{ color: var(--orange) !important;}

  @media (max-width: 900px){
    .legal-grid{ grid-template-columns: 1fr; gap: 32px;}
    .legal-toc{ position: static;}
    .sitemap-grid{ grid-template-columns: 1fr;}
    .legal-content .info-block dl{ grid-template-columns: 1fr;}
  }


/* ===== from sitemap.html ===== */

  .legal-hero{ padding: clamp(120px, 11vw, 170px) var(--pad-x) clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line);}
  .legal-hero-inner{ max-width: 1100px; margin: 0 auto;}
  .legal-hero h1{ font-size: clamp(48px, 7vw, 100px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; margin: 0;}
  .legal-hero h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .legal-hero .meta{
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 24px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-hero .meta b{ color: var(--ink); font-weight: 500;}
  .legal-body{ padding: clamp(48px, 6vw, 96px) var(--pad-x); }
  .legal-grid{ max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start;}
  .legal-toc{ position: sticky; top: 100px;}
  .legal-toc h5{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
  }
  .legal-toc a{
    display: block;
    font-family: var(--f-sans);
    font-size: 13.5px;
    color: var(--muted);
    padding: 8px 0;
    border-top: 1px solid var(--line);
    transition: color .2s;
  }
  .legal-toc a:hover{ color: var(--orange);}
  .legal-content h2{
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.025em;
    font-weight: 500;
    margin: 48px 0 14px;
    scroll-margin-top: 100px;
  }
  .legal-content h2:first-child{ margin-top: 0;}
  .legal-content h2 .num{
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--orange);
    margin-right: 12px;
  }
  .legal-content h3{
    font-size: 16px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink);
    margin: 20px 0 8px;
  }
  .legal-content p, .legal-content li{
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 14px;
  }
  .legal-content ul{
    padding-left: 0;
    list-style: none;
    margin: 0 0 18px;
  }
  .legal-content ul li{
    position: relative;
    padding-left: 22px;
  }
  .legal-content ul li::before{
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 1px;
    background: var(--orange);
  }
  .legal-content a{ color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s, color .2s;}
  .legal-content a:hover{ color: var(--orange); border-color: var(--orange);}
  .legal-content .info-block{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 24px 0;
  }
  .legal-content .info-block h4{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--orange);
    margin: 0 0 12px;
    font-weight: 500;
  }
  .legal-content .info-block dl{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 24px;
    margin: 0;
  }
  .legal-content .info-block dt{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-content .info-block dd{
    margin: 0;
    font-size: 14.5px;
    color: var(--ink);
  }

  /* Sitemap */
  .sitemap-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
  }
  .sitemap-col{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .sitemap-col h3{
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .sitemap-col h3 .num{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--orange); margin-right: 10px;
  }
  .sitemap-col ul{ padding: 0; margin: 0; list-style: none;}
  .sitemap-col ul li{ padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .sitemap-col ul li::before{ display: none;}
  .sitemap-col ul li:last-child{ border-bottom: 0;}
  .sitemap-col a{
    display: flex; justify-content: space-between; align-items: center;
    color: var(--ink) !important;
    border: 0 !important;
    font-size: 14px;
    font-family: var(--f-sans);
  }
  .sitemap-col a small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .sitemap-col a:hover{ color: var(--orange) !important;}

  @media (max-width: 900px){
    .legal-grid{ grid-template-columns: 1fr; gap: 32px;}
    .legal-toc{ position: static;}
    .sitemap-grid{ grid-template-columns: 1fr;}
    .legal-content .info-block dl{ grid-template-columns: 1fr;}
  }


/* ============================================================
   PAGE-SPECIFIC STYLES (extracted from subpages for WP theme)
   ============================================================ */


/* ===== from services.html ===== */

  /* ===== Services page ===== */
  .page-hero{ padding: clamp(120px, 11vw, 170px) var(--pad-x) clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line);}
  .ph-grid{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end;}
  .ph-grid h1{ font-size: clamp(56px, 9vw, 160px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 500;}
  .ph-grid h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .ph-grid .right p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 460px;}
  .crumbs{ display:flex; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px;}
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}

  /* ===== Services grid (6 cards, alternating layout, light theme cards on dark bg) ===== */
  .svc-section{ padding: clamp(64px, 8vw, 120px) var(--pad-x); background: var(--bg);}
  .svc-section-head{ max-width: 1680px; margin: 0 auto 56px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; flex-wrap: wrap;}
  .svc-section-head h2{ font-size: clamp(40px, 5.6vw, 88px); line-height: 1; letter-spacing: -0.04em; font-weight: 500;}
  .svc-section-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .svc-section-head .meta{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);}

  .svc-list-v2{ max-width: 1680px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;}
  .svc-card{
    display: grid;
    grid-template-columns: 0.9fr 1.2fr 1fr;
    gap: clamp(20px, 3vw, 48px);
    background: var(--bg-2);
    border-radius: var(--radius);
    padding: clamp(28px, 3vw, 44px);
    align-items: center;
    transition: background .3s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
    border: 1px solid var(--line);
  }
  .svc-card:hover{
    transform: translateY(-2px);
    background: var(--bg-3);
    border-color: rgba(255,74,28,0.4);
    box-shadow: 0 24px 60px -20px rgba(255,74,28,0.25);
  }
  .svc-card.flip{ grid-template-columns: 1fr 1.2fr 0.9fr; }
  .svc-card.flip .svc-illo{ order: 3; }
  .svc-card.flip .svc-meta{ order: 1; }
  .svc-card.flip .svc-body{ order: 2; }

  .svc-illo{
    aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
    background: var(--bg);
    display: grid; place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    position: relative;
  }
  .svc-illo img{ width: 70%; height: 70%; object-fit: contain;}
  .svc-illo .corner-mark{
    position: absolute;
    top: 12px; right: 14px;
    font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
  }
  .svc-illo.has-glass img{ filter: invert(1) hue-rotate(180deg);}

  .svc-body{ display: flex; flex-direction: column; gap: 12px;}
  .svc-body .num{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--orange);
  }
  .svc-body .num::before{
    content: 'IIII '; color: var(--orange);
    letter-spacing: -0.1em; margin-right: 6px;
  }
  .svc-body h3{
    font-size: clamp(26px, 2.8vw, 42px);
    font-weight: 500; letter-spacing: -0.03em; line-height: 1.0;
    color: var(--ink);
  }
  .svc-body h3 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .svc-body p{ font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 440px;}

  .svc-meta{
    display: flex; flex-direction: column; gap: 16px;
    align-items: flex-start;
  }
  .svc-tags-v2{ display: flex; flex-wrap: wrap; gap: 6px;}
  .svc-tags-v2 span{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; padding: 7px 12px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
  }
  .svc-cta{
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--orange); color: #fff;
    padding: 10px 18px;
    border-radius: 100px;
    font-family: var(--f-sans); font-weight: 500; font-size: 13px;
    transition: transform .25s, background .25s;
  }
  .svc-cta:hover{ transform: translate(2px, -2px); background: var(--orange-2);}
  .svc-cta svg{ width: 12px; height: 12px;}

  @media (max-width: 1000px){
    .svc-card, .svc-card.flip{ grid-template-columns: 1fr 1fr; gap: 24px;}
    .svc-meta{ grid-column: span 2; flex-direction: row; justify-content: space-between; align-items: center;}
    .svc-card.flip .svc-illo, .svc-card.flip .svc-body, .svc-card.flip .svc-meta{ order: unset;}
  }
  @media (max-width: 700px){
    .svc-card, .svc-card.flip{ grid-template-columns: 1fr;}
    .svc-meta{ grid-column: auto; flex-direction: column; align-items: flex-start; gap: 14px;}
    .svc-illo{ max-width: 260px;}
  }

  /* ============== PRICING ============== */
  .price-strip{
    background: var(--bg);
    padding: clamp(72px, 9vw, 140px) var(--pad-x);
    position: relative;
    overflow: hidden;
  }
  .price-bg-glyph{
    position: absolute;
    top: 5%;
    pointer-events: none; user-select: none;
    font-family: var(--f-serif);
    font-size: clamp(160px, 22vw, 320px);
    color: rgba(242,239,233,0.04);
    line-height: 0.9;
    letter-spacing: -0.03em;
  }
  .price-bg-glyph.left{ left: 3%;}
  .price-bg-glyph.right{ right: 3%;}

  .price-head{ max-width: 1100px; margin: 0 auto 48px; text-align: center; position: relative; z-index: 2;}
  .price-head .eyebrow{ justify-content: center; display: inline-flex;}
  .price-head .eyebrow::before{ display: none;}
  .price-head .eyebrow::after{ content: 'IIII · CENNÍK'; color: var(--orange); font-weight: 500;}
  .price-head h2{
    font-size: clamp(48px, 7vw, 104px);
    line-height: 1.0;
    font-weight: 500; letter-spacing: -0.04em;
    margin: 18px 0 18px;
  }
  .price-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .price-head .sub{ color: var(--muted); max-width: 560px; margin: 0 auto; font-size: 16px;}

  .billing-toggle{
    display: inline-flex; align-items: center; gap: 16px;
    margin-top: 32px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
  }
  .billing-switch{
    display: inline-flex;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: 4px;
  }
  .billing-switch button{
    background: transparent;
    border: 0;
    color: var(--muted);
    padding: 10px 22px;
    border-radius: 100px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s, color .25s;
  }
  .billing-switch button.on{ background: var(--orange); color: #fff;}
  .billing-discount{ color: var(--orange);}

  .price-grid{
    max-width: 1480px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative; z-index: 2;
  }
  .price-card{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px 28px;
    display: flex; flex-direction: column; gap: 22px;
    position: relative;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
  }
  .price-card:hover:not(.featured):not(.builder){
    transform: translateY(-4px);
    border-color: rgba(255,74,28,0.4);
    box-shadow: 0 30px 60px -20px rgba(255,74,28,0.25);
  }
  .price-card .ptop{
    display: flex; justify-content: space-between; align-items: center;
  }
  .price-card .ptype{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
  }
  .price-card .ptype::before{
    content: 'III '; color: var(--orange); letter-spacing: -0.1em;
  }
  .price-card .pbadge{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 5px;
  }
  .price-card .pbadge::before{ content: '✦'; color: var(--muted-2); font-size: 9px;}
  .price-card.featured{
    background: var(--bg-3);
    border-color: rgba(255,74,28,0.45);
  }
  .price-card.featured .pbadge{
    background: var(--orange); color: #fff; border-color: var(--orange);
  }
  .price-card.featured .pbadge::before{ color: rgba(255,255,255,0.7);}
  .price-card .ptier{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(28px, 2.6vw, 36px);
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1;
  }
  .price-card .ptier em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .price-card .pdesc{
    font-size: 14px; line-height: 1.55;
    color: var(--muted);
    min-height: 60px;
  }
  .price-card .budget-tag{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 12px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
    align-self: flex-start;
  }
  .price-card .budget-tag::before{ content: 'IIII · '; color: var(--orange); margin-right: 2px;}
  .price-card .pamount{
    display: flex; align-items: baseline; gap: 4px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin-top: 4px;
  }
  .price-card .pamount .pre{
    font-family: var(--f-mono);
    font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 6px;
  }
  .price-card .pamount .num{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(54px, 5.2vw, 76px);
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--ink);
  }
  .price-card .pamount .unit{
    font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em;
    color: var(--muted);
  }
  .price-card .setup{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: -10px;
  }
  .price-card .setup::before{ content: '+ '; color: var(--orange);}

  .price-card ul{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 14px;
    flex: 1;
  }
  .price-card ul li{
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 14px; line-height: 1.4;
    color: var(--ink);
  }
  .price-card ul li::before{
    content: '';
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 4px;
    background: var(--orange);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 2px;
  }
  .price-card .btn{ width: 100%; justify-content: space-between;}

  /* Builder card with its own visual */
  .price-card.builder .ptier em{ display: inline-block;}
  .price-card.builder .pamount .num{ font-size: clamp(48px, 4.8vw, 70px);}
  .price-card.builder ul li{ font-size: 13.5px;}

  @media (max-width: 1100px){
    .price-grid{ grid-template-columns: 1fr 1fr;}
  }
  @media (max-width: 640px){
    .price-grid{ grid-template-columns: 1fr;}
  }

  /* ============== BUILDER (custom growth stack) ============== */
  .builder-section{
    background: var(--bg);
    padding: clamp(72px, 9vw, 140px) var(--pad-x);
    border-top: 1px solid var(--line);
  }
  .builder-head{ max-width: 1680px; margin: 0 auto 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end;}
  .builder-head .eyebrow{ margin-bottom: 18px;}
  .builder-head h2{ font-size: clamp(40px, 5.2vw, 80px); letter-spacing: -0.04em; font-weight: 500; line-height: 0.95;}
  .builder-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .builder-head .right{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    text-align: right;
    max-width: 320px;
    justify-self: end;
    line-height: 1.6;
  }
  .builder-head .right b{ color: var(--orange); font-weight: 500;}

  .builder-grid{
    max-width: 1680px; margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 16px;
  }
  .modules{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mod{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    cursor: pointer;
    transition: border-color .25s, background .25s;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
  }
  .mod:hover{ background: var(--bg-3); border-color: var(--line-2);}
  .mod.on{ border-color: var(--orange); background: var(--bg-3);}
  .mod .mod-top{
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  }
  .mod .mod-top h4{
    font-size: 17px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
  }
  .mod .mod-price{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--orange); white-space: nowrap;
    text-transform: uppercase;
  }
  .mod p{
    font-size: 13px; line-height: 1.5;
    color: var(--muted);
    margin: 4px 0 0;
  }
  .mod .mod-code{
    margin-top: 8px;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted-2);
    text-align: right;
  }
  .mod .check{
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--line-2);
    display: grid; place-items: center;
    transition: background .2s, border-color .2s;
    margin-right: 4px;
  }
  .mod.on .check{
    background: var(--orange);
    border-color: var(--orange);
  }
  .mod .check::after{
    content: '';
    width: 12px; height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8l3 3 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0;
    transition: opacity .2s;
  }
  .mod.on .check::after{ opacity: 1;}

  .calc{
    background: #0A0A0A;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    display: flex; flex-direction: column; gap: 18px;
    color: var(--ink);
    position: sticky;
    top: 100px;
    align-self: start;
    overflow: hidden;
  }
  .calc-glyph{
    position: absolute;
    right: -4%; top: 4%;
    font-family: var(--f-serif);
    font-size: 220px;
    line-height: 1;
    color: rgba(255,74,28,0.18);
    pointer-events: none;
    user-select: none;
  }
  .calc-head{
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    position: relative;
  }
  .calc-head .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; margin-right: 6px;}
  .calc h3{
    font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--ink);
    position: relative;
  }
  .calc .calc-prompt{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted-2); text-transform: uppercase;
    border-top: 1px dashed rgba(242,239,233,0.18);
    border-bottom: 1px dashed rgba(242,239,233,0.18);
    padding: 12px 0;
    position: relative;
  }
  .calc-line{
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em;
    color: var(--muted);
    position: relative;
  }
  .calc-line.discount{ color: var(--orange);}
  .calc-total{
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px solid rgba(242,239,233,0.18);
    padding-top: 16px;
    position: relative;
  }
  .calc-total .lbl{
    display: flex; flex-direction: column;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted-2); text-transform: uppercase;
    line-height: 1.3;
  }
  .calc-total .lbl b{ color: var(--ink); font-size: 12px; font-weight: 500;}
  .calc-total .num{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -0.045em;
    line-height: 0.9;
    color: var(--ink);
  }
  .calc-total .num small{
    font-family: var(--f-mono); font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.06em;
    font-weight: 400;
    margin-left: 2px;
  }
  .calc .btn{ justify-content: space-between; position: relative;}
  .calc.disabled .btn{ opacity: 0.4; pointer-events: none;}

  @media (max-width: 900px){
    .builder-head{ grid-template-columns: 1fr; }
    .builder-head .right{ text-align: left; justify-self: start;}
    .builder-grid{ grid-template-columns: 1fr;}
    .modules{ grid-template-columns: 1fr;}
    .calc{ position: static;}
    .calc-glyph{ font-size: 140px;}
  }

  /* ============== FAQ ============== */
  .faq-section{ padding: clamp(64px, 8vw, 120px) var(--pad-x); background: var(--bg-2);}
  .faq-head{ max-width: 1680px; margin: 0 auto 40px; text-align: center;}
  .faq-head h2{ font-size: clamp(40px, 5.6vw, 88px); font-weight: 500; letter-spacing: -0.035em; margin-top: 14px;}
  .faq-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}

  .faq-tabs{ max-width: 1680px; margin: 0 auto 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
  .faq-tab{
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 18px 22px;
    cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    transition: background .25s, border-color .25s;
    text-align: left;
  }
  .faq-tab:hover{ background: var(--bg-3); border-color: rgba(255,74,28,0.4);}
  .faq-tab.on{ background: var(--orange); border-color: var(--orange); color: #fff;}
  .faq-tab .tab-ico{
    width: 38px; height: 38px;
    border-radius: 9px;
    background: var(--bg-3);
    color: var(--orange);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: background .25s;
  }
  .faq-tab.on .tab-ico{ background: rgba(255,255,255,0.15); color: #fff;}
  .faq-tab .tab-body b{ display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);}
  .faq-tab .tab-body small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted); margin-top: 2px; display: block;
  }
  .faq-tab.on .tab-body small{ color: rgba(255,255,255,0.8);}

  .faq-body{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 2fr; gap: 56px; align-items: start;}
  .faq-side{ display: flex; flex-direction: column; gap: 24px;}
  .faq-side .help-pill{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg); border: 1px solid var(--line);
    padding: 10px 16px;
    border-radius: 100px;
    align-self: flex-start;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .faq-side .help-pill::before{ content: 'IIII'; color: var(--orange); letter-spacing: -0.1em;}
  .faq-side h3{ font-size: clamp(40px, 5vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 0.95;}
  .faq-side .help-card{
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    max-width: 320px;
  }
  .faq-side .help-card .q{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }

  .faq-list{ display: flex; flex-direction: column; gap: 10px;}
  .faq-q{
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 28px;
    cursor: pointer;
    transition: background .25s, border-color .25s;
  }
  .faq-q.open{ background: #0A0A0A; border-color: var(--line);}
  .faq-q-head{ display: flex; justify-content: space-between; align-items: center; gap: 16px;}
  .faq-q-head .q-text{ font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; letter-spacing: -0.015em; color: var(--ink);}
  .faq-q.open .q-text{ color: var(--ink);}
  .faq-q .q-toggle{
    width: 28px; height: 28px;
    flex-shrink: 0;
    display: grid; place-items: center;
    color: var(--ink);
    transition: transform .25s, color .25s;
  }
  .faq-q.open .q-toggle{ color: var(--orange); transform: rotate(45deg);}
  .faq-q .q-body{
    max-height: 0; overflow: hidden;
    transition: max-height .35s cubic-bezier(.2,.7,.2,1), margin-top .35s;
    color: var(--muted);
    font-size: 15px; line-height: 1.6;
  }
  .faq-q.open .q-body{ max-height: 300px; margin-top: 12px;}

  @media (max-width: 1000px){
    .faq-tabs{ grid-template-columns: 1fr 1fr;}
    .faq-body{ grid-template-columns: 1fr; gap: 32px;}
  }
  @media (max-width: 600px){
    .faq-tabs{ grid-template-columns: 1fr;}
  }


/* ===== from portfolio.html ===== */

  .page-hero{
    padding: clamp(64px, 8vw, 120px) var(--pad-x) clamp(40px, 5vw, 80px);
    border-bottom: 1px solid var(--line);
  }
  .ph-grid{
    max-width: 1680px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }
  .ph-grid h1{
    font-size: clamp(56px, 9vw, 160px);
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-weight: 500;
  }
  .ph-grid h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .ph-grid .right p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 460px;}
  .crumbs{
    display:flex; gap: 10px; align-items: center;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 32px;
  }
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}

  /* Filters */
  .filters{
    padding: 32px var(--pad-x);
    border-bottom: 1px solid var(--line);
    display: flex; gap: 12px; flex-wrap: wrap;
    max-width: 1680px; margin: 0 auto;
  }
  .filter-pill{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 10px 16px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    background: transparent;
  }
  .filter-pill:hover{ background: rgba(10,10,10,0.04); }
  .filter-pill.active{ background: var(--ink); color: var(--on-dark); border-color: var(--ink);}
  .filter-pill .ct{
    margin-left: 6px; opacity: 0.5; font-weight: 400;
  }
  .filter-pill.active .ct{ opacity: 0.7;}

  /* Case grid */
  .cases{
    padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(64px, 8vw, 120px);
    max-width: 1680px; margin: 0 auto;
  }
  .case-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .case{
    display: flex; flex-direction: column;
    cursor: pointer;
    text-decoration: none; color: inherit;
  }
  .case.wide{ grid-column: span 2; }
  .case .case-media{
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-2);
    position: relative;
  }
  .case.wide .case-media{ aspect-ratio: 21/9; }
  .case .case-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,.61,.36,1);}
  .case:hover .case-media img{ transform: scale(1.04);}
  .case .case-tag{
    position: absolute; top: 16px; left: 16px;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 7px 12px;
    background: rgba(10,10,10,0.6);
    color: var(--on-dark);
    border-radius: 100px;
    backdrop-filter: blur(10px);
  }
  .case .case-result{
    position: absolute; bottom: 18px; left: 18px;
    background: var(--orange);
    color: #fff;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -0.035em;
    padding: 10px 18px;
    border-radius: 10px;
    line-height: 1;
  }
  .case .case-result em{ font-family: var(--f-serif); font-style: italic; font-weight: 400;}
  .case .case-result small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block; margin-top: 6px; opacity: 0.85;
    font-weight: 400;
  }
  .case .body{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
  }
  .case h3{
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
  .case .meta{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 8px;
  }
  .case .meta span{ color: var(--orange); margin-right: 8px;}
  .case .case-arrow{
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--ink); color: var(--on-dark);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s;
  }
  .case:hover .case-arrow{ background: var(--orange); transform: translate(3px, -3px);}
  @media (max-width: 900px){
    .case-grid{ grid-template-columns: 1fr; }
    .case.wide{ grid-column: auto;}
  }

  /* Methodology strip */
  .method{
    background: var(--bg-2);
    padding: clamp(56px, 6vw, 96px) var(--pad-x);
  }
  .method-grid{
    max-width: 1480px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: start;
  }
  .method-grid h2{
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 500;
    letter-spacing: -0.035em;
  }
  .method-grid h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .method-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
  .method-item{
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .method-item .n{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--orange); text-transform: uppercase;
  }
  .method-item h4{
    margin: 10px 0 6px;
    font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
  }
  .method-item p{ font-size: 13.5px; line-height: 1.55; color: var(--muted);}
  @media (max-width: 900px){
    .method-grid{ grid-template-columns: 1fr;}
    .method-list{ grid-template-columns: 1fr;}
  }
  .case.is-template{ cursor: default; pointer-events: none; opacity: 0.85;}
  .case.is-template .case-media{ background: var(--bg-3);}
  .case-placeholder{
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    background:
      repeating-linear-gradient(
        45deg,
        var(--bg-2),
        var(--bg-2) 12px,
        var(--bg-3) 12px,
        var(--bg-3) 24px
      );
  }
  .case-placeholder .ph-glyph{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(80px, 10vw, 140px);
    color: var(--muted-2);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .case-placeholder .ph-label{
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .empty-state{
    max-width: 680px;
    margin: 0 auto clamp(40px, 5vw, 64px);
    text-align: center;
  }
  .empty-state .eyebrow{ justify-content: center; display: inline-flex;}
  .empty-state .empty-h{
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 500;
    margin: 18px 0 14px;
  }
  .empty-state .empty-h em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .empty-state .empty-p{ color: var(--muted); font-size: 16px; line-height: 1.6;}


/* ===== from about.html ===== */

  .page-hero{ padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line);}
  .ph-grid{ max-width: 1680px; margin: 0 auto; display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end;}
  .ph-grid h1{ font-size: clamp(56px, 9vw, 160px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 500; margin:0;}
  .ph-grid h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .ph-grid .right p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 460px;}
  .crumbs{ display:flex; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px;}
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}

  /* Manifesto */
  .manifesto{ padding: clamp(64px, 8vw, 120px) var(--pad-x); }
  .manifesto-inner{ max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(40px, 6vw, 80px); align-items: center;}
  .manifesto-text{ display: flex; flex-direction: column; gap: 24px;}
  .mascot-card{
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, #181818, #0A0A0A);
    border: 1px solid var(--line);
  }
  .mascot-card img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,.61,.36,1);}
  .mascot-card:hover img{ transform: scale(1.04);}
  .mascot-card .mascot-tag{
    position: absolute;
    bottom: 18px; left: 18px; right: 18px;
    display: flex; justify-content: space-between; align-items: end;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    pointer-events: none;
  }
  .mascot-card .mascot-tag b{ color: var(--ink); font-weight: 500;}
  @media (max-width: 900px){
    .manifesto-inner{ grid-template-columns: 1fr; gap: 40px;}
    .mascot-card{ aspect-ratio: 1/1; max-width: 480px;}
  }
  .manifesto p.lead-big{
    font-size: clamp(28px, 3.4vw, 52px);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--ink);
    max-width: 1080px;
  }
  .manifesto p.lead-big em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .manifesto .sub{
    margin-top: 40px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    color: var(--muted);
    font-size: 17px; line-height: 1.6;
    max-width: 920px;
  }
  @media (max-width: 800px){ .manifesto .sub{ grid-template-columns: 1fr;} }

  /* Team */
  .team{ padding: clamp(64px, 8vw, 120px) var(--pad-x); background: var(--bg-2);}
  .team-head{ max-width: 1680px; margin: 0 auto 48px; display:flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;}
  .team-head h2{ font-size: clamp(36px, 4.8vw, 72px); letter-spacing: -0.04em; font-weight: 500;}
  .team-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .team-grid{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
  .member{ display: flex; flex-direction: column;}
  .member .ph{
    aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
    background: var(--orange); position: relative;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .member:hover .ph{ transform: translateY(-4px);}
  .member .ph img{ width: 100%; height: 100%; object-fit: cover; transition: filter .35s, opacity .35s;}
  .member:hover .ph img{ filter: grayscale(0); }
  .member .ph::after{
    content: '';
    position: absolute; inset: 0;
    background: var(--orange);
    mix-blend-mode: hard-light;
    opacity: 0.3;
    pointer-events: none;
    transition: opacity .3s;
  }
  .member:hover .ph::after{ opacity: 0;}
  .member .body{ padding: 18px 4px; }
  .member b{ display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.015em;}
  .member small{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase;}
  @media (max-width: 900px){ .team-grid{ grid-template-columns: 1fr 1fr;} }

  /* Values */
  .values{ padding: clamp(64px, 8vw, 120px) var(--pad-x); }
  .values-head{ max-width: 1680px; margin: 0 auto 56px; display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;}
  .values-head h2{ font-size: clamp(36px, 4.8vw, 72px); letter-spacing: -0.04em; font-weight: 500;}
  .values-head h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .values-head .right p{ color: var(--muted); max-width: 460px;}
  .v-grid{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;}
  .v-card{
    background: var(--bg-2);
    border-radius: var(--radius);
    padding: 32px 28px 28px;
    display: flex; flex-direction: column; gap: 16px;
    min-height: 280px;
  }
  .v-card .n{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--orange); text-transform: uppercase;}
  .v-card h3{ font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.025em;}
  .v-card h3 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .v-card p{ font-size: 14px; line-height: 1.6; color: var(--muted);}
  @media (max-width: 800px){
    .v-grid{ grid-template-columns: 1fr; }
    .values-head{ grid-template-columns: 1fr;}
  }

  /* Numbers strip */
  .nums{ padding: clamp(64px, 8vw, 120px) var(--pad-x); background: var(--bg-2); color: var(--ink);}
  .nums-inner{ max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
  .nb{ display: flex; flex-direction: column; gap: 14px;}
  .nb .nm{ font-family: var(--f-sans); font-weight: 500; font-size: clamp(60px, 7vw, 120px); line-height: 1; letter-spacing: -0.05em;}
  .nb .nm em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .nb .lb{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line);}
  @media (max-width: 900px){ .nums-inner{ grid-template-columns: 1fr 1fr; gap: 32px;} }


/* ===== from contact.html ===== */

  .contact-hero{
    padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(40px, 5vw, 64px);
  }
  .ch-inner{
    max-width: 1680px; margin: 0 auto;
  }
  .crumbs{
    display:flex; gap: 10px; align-items: center;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 24px;
  }
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}
  .ch-inner h1{
    font-size: clamp(56px, 11vw, 200px);
    line-height: 0.92;
    letter-spacing: -0.05em;
    font-weight: 500;
    margin: 0;
  }
  .ch-inner h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}

  /* Contact body */
  .contact-body{
    padding: 0 var(--pad-x) clamp(64px, 8vw, 120px);
  }
  .contact-grid{
    max-width: 1680px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }

  /* Form */
  .form-card{
    background: var(--bg-2);
    border-radius: var(--radius);
    padding: clamp(28px, 4vw, 56px);
    position: relative;
  }
  .form-card .eyebrow{ margin-bottom: 24px;}
  .form-card h2{
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.035em;
    font-weight: 500;
    margin-bottom: 36px;
  }
  .form-card h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .field{
    margin-bottom: 24px;
  }
  .field label{
    display: block;
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 8px;
  }
  .field input, .field textarea, .field select{
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    padding: 12px 0;
    font-family: var(--f-sans);
    font-size: 18px;
    color: var(--ink);
    outline: none;
    transition: border-color .2s;
  }
  .field input:focus, .field textarea:focus, .field select:focus{
    border-color: var(--orange);
  }
  .field textarea{ resize: vertical; min-height: 80px;}
  .field input::placeholder, .field textarea::placeholder{ color: var(--muted-2);}

  .chips{
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 4px;
  }
  .chip{
    font-family: var(--f-sans);
    font-size: 13.5px;
    padding: 9px 16px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
    transition: background .2s, color .2s, border-color .2s;
  }
  .chip:hover{ background: rgba(10,10,10,0.04);}
  .chip.on{ background: var(--ink); color: var(--on-dark); border-color: var(--ink);}

  .field-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  @media (max-width: 600px){
    .field-row{ grid-template-columns: 1fr;}
  }

  .form-submit{
    margin-top: 32px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
  }
  .form-submit small{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--muted); text-transform: uppercase;
  }

  /* Side info */
  .side{
    display: flex; flex-direction: column; gap: 32px;
  }
  .info-block{
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
  .info-block h4{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 14px;
    font-weight: 500;
  }
  .info-block a, .info-block p{
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.3;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .info-block .small{
    font-size: 14px;
    color: var(--muted);
    font-weight: 400;
    margin-top: 4px;
  }
  .info-portrait{
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--orange);
    margin-top: 12px;
  }
  .info-portrait img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.95;}

  /* FAQ */
  .faq{
    padding: clamp(56px, 7vw, 96px) var(--pad-x);
    background: var(--bg-2);
  }
  .faq-grid{
    max-width: 1480px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    align-items: start;
  }
  .faq-grid h2{
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 500;
    letter-spacing: -0.035em;
  }
  .faq-grid h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .faq-list .q{
    border-top: 1px solid var(--line);
    padding: 24px 0;
    cursor: pointer;
  }
  .faq-list .q:last-child{ border-bottom: 1px solid var(--line);}
  .faq-list .q-head{
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
  }
  .faq-list .q-head .q-text{
    font-family: var(--f-sans);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }
  .faq-list .q-toggle{
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-2);
    display: grid; place-items: center;
    transition: transform .2s, background .2s;
    flex-shrink: 0;
  }
  .faq-list .q.open .q-toggle{ background: var(--orange); border-color: var(--orange); transform: rotate(45deg); color: #fff;}
  .faq-list .q-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.2,.7,.2,1), margin-top .35s;
    color: var(--muted);
    font-size: 15px; line-height: 1.6;
  }
  .faq-list .q.open .q-body{
    max-height: 300px;
    margin-top: 16px;
  }

  @media (max-width: 900px){
    .contact-grid{ grid-template-columns: 1fr;}
    .faq-grid{ grid-template-columns: 1fr;}
  }


/* ===== from contact.html ===== */

  /* Refined contact page */
  .contact-hero h1{
    font-size: clamp(72px, 12vw, 200px) !important;
    line-height: 0.92 !important;
  }
  .form-card{
    background: linear-gradient(180deg, rgba(28,28,28,0.7), rgba(15,15,15,0.5)) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
  }
  .form-card .eyebrow{ margin-bottom: 18px; font-size: 11px;}
  .form-card h2{
    font-size: clamp(28px, 2.6vw, 38px) !important;
    margin-bottom: 28px !important;
  }
  .field{ margin-bottom: 28px;}
  .field label{
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
  }
  .field input, .field textarea{
    font-size: 17px !important;
    padding: 12px 0 !important;
    border-bottom-width: 1px !important;
  }
  .chip{
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.12) !important;
    transition: all .25s !important;
  }
  .chip:hover{ background: rgba(255,74,28,0.10) !important; border-color: rgba(255,74,28,0.3) !important;}
  .chip.on{
    background: var(--orange) !important;
    color: #fff !important;
    border-color: var(--orange) !important;
  }
  .form-submit small{ font-size: 10px !important;}

  /* Side info — turn each block into glass card */
  .side{ gap: 12px !important;}
  .info-block{
    background: rgba(28,28,28,0.55) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 22px 24px !important;
    transition: border-color .3s, background .3s;
  }
  .info-block:hover{ border-color: rgba(255,74,28,0.3);}
  .info-block h4{
    margin-bottom: 10px !important;
    font-family: var(--f-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    color: var(--orange) !important;
  }
  .info-block a, .info-block p{
    font-size: 18px !important;
    font-weight: 500 !important;
  }
  .info-block .small{
    margin-top: 6px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }


/* ===== from blog.html ===== */

  .page-hero{ padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line);}
  .ph-grid{ max-width: 1680px; margin: 0 auto; display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end;}
  .ph-grid h1{ font-size: clamp(56px, 9vw, 160px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 500; margin:0;}
  .ph-grid h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .ph-grid .right p{ font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 460px;}
  .crumbs{ display:flex; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px;}
  .crumbs a{ color: var(--ink);}
  .crumbs span.sep{ opacity: 0.4;}

  .filters{ padding: 32px var(--pad-x); border-bottom: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; max-width: 1680px; margin: 0 auto;}
  .filter-pill{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 100px; color: var(--ink); cursor: pointer; transition: all .2s; background: transparent;}
  .filter-pill:hover{ background: rgba(10,10,10,0.04);}
  .filter-pill.active{ background: var(--ink); color: var(--on-dark); border-color: var(--ink);}

  .featured-post{
    padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(32px, 4vw, 64px);
  }
  .fp-inner{ max-width: 1680px; margin: 0 auto; display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 4vw, 80px); align-items: center;}
  .fp-img{ aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--bg-2);}
  .fp-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,.61,.36,1);}
  .fp-inner:hover .fp-img img{ transform: scale(1.04);}
  .fp-meta{ display: flex; gap: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px;}
  .fp-meta .cat{ color: var(--orange);}
  .fp-side h2{ font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;}
  .fp-side h2 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .fp-side p{ color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 18px; max-width: 480px;}
  .fp-side .btn{ margin-top: 28px;}
  @media (max-width: 900px){ .fp-inner{ grid-template-columns: 1fr;} }

  /* List */
  .post-list{ padding: clamp(48px, 6vw, 96px) var(--pad-x); border-top: 1px solid var(--line);}
  .pl-inner{ max-width: 1680px; margin: 0 auto;}
  .pl-head{ display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px;}
  .pl-head h2{ font-size: clamp(28px, 3vw, 44px); font-weight: 500; letter-spacing: -0.03em;}
  .pl-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
  .post{ display: flex; flex-direction: column; cursor: pointer; background: var(--bg-2); border-radius: var(--radius); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1);}
  .post:hover{ transform: translateY(-4px);}
  .post .img{ aspect-ratio: 16/10; overflow: hidden;}
  .post .img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1);}
  .post:hover .img img{ transform: scale(1.05);}
  .post .body{ padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1;}
  .post .meta{ display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);}
  .post .meta .cat{ color: var(--orange);}
  .post h3{ font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500;}
  .post .excerpt{ font-size: 13.5px; line-height: 1.55; color: var(--muted);}
  .post .read{ margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;}
  .post .read .arrow{ width: 22px; height: 22px; border-radius:50%; background: var(--ink); color:#fff; display: inline-grid; place-items: center; transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s;}
  .post:hover .read .arrow{ background: var(--orange); transform: translate(2px, -2px);}
  .post .read .arrow svg{ width:10px; height:10px;}
  @media (max-width: 900px){ .pl-grid{ grid-template-columns: 1fr;} }
  .post.is-template{ pointer-events: none; opacity: 0.85;}
  .post-placeholder{
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    background:
      repeating-linear-gradient(
        45deg,
        var(--bg-2),
        var(--bg-2) 10px,
        var(--bg-3) 10px,
        var(--bg-3) 20px
      );
  }
  .post-placeholder .ph-glyph{
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: clamp(48px, 6vw, 80px);
    color: var(--muted-2);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .post-placeholder .ph-label{
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .post .img{ position: relative;}

  .empty-state{
    max-width: 680px;
    margin: 0 auto clamp(32px, 5vw, 56px);
    text-align: center;
  }
  .empty-state .eyebrow{ justify-content: center; display: inline-flex;}
  .empty-state .empty-h{
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 500;
    margin: 18px 0 14px;
  }
  .empty-state .empty-h em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .empty-state .empty-p{ color: var(--muted); font-size: 16px; line-height: 1.6;}


/* ===== from privacy.html ===== */

  .legal-hero{ padding: clamp(120px, 11vw, 170px) var(--pad-x) clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line);}
  .legal-hero-inner{ max-width: 1100px; margin: 0 auto;}
  .legal-hero h1{ font-size: clamp(48px, 7vw, 100px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; margin: 0;}
  .legal-hero h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .legal-hero .meta{
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 24px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-hero .meta b{ color: var(--ink); font-weight: 500;}
  .legal-body{ padding: clamp(48px, 6vw, 96px) var(--pad-x); }
  .legal-grid{ max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start;}
  .legal-toc{ position: sticky; top: 100px;}
  .legal-toc h5{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
  }
  .legal-toc a{
    display: block;
    font-family: var(--f-sans);
    font-size: 13.5px;
    color: var(--muted);
    padding: 8px 0;
    border-top: 1px solid var(--line);
    transition: color .2s;
  }
  .legal-toc a:hover{ color: var(--orange);}
  .legal-content h2{
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.025em;
    font-weight: 500;
    margin: 48px 0 14px;
    scroll-margin-top: 100px;
  }
  .legal-content h2:first-child{ margin-top: 0;}
  .legal-content h2 .num{
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--orange);
    margin-right: 12px;
  }
  .legal-content h3{
    font-size: 16px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink);
    margin: 20px 0 8px;
  }
  .legal-content p, .legal-content li{
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 14px;
  }
  .legal-content ul{
    padding-left: 0;
    list-style: none;
    margin: 0 0 18px;
  }
  .legal-content ul li{
    position: relative;
    padding-left: 22px;
  }
  .legal-content ul li::before{
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 1px;
    background: var(--orange);
  }
  .legal-content a{ color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s, color .2s;}
  .legal-content a:hover{ color: var(--orange); border-color: var(--orange);}
  .legal-content .info-block{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 24px 0;
  }
  .legal-content .info-block h4{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--orange);
    margin: 0 0 12px;
    font-weight: 500;
  }
  .legal-content .info-block dl{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 24px;
    margin: 0;
  }
  .legal-content .info-block dt{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-content .info-block dd{
    margin: 0;
    font-size: 14.5px;
    color: var(--ink);
  }

  /* Sitemap */
  .sitemap-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
  }
  .sitemap-col{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .sitemap-col h3{
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .sitemap-col h3 .num{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--orange); margin-right: 10px;
  }
  .sitemap-col ul{ padding: 0; margin: 0; list-style: none;}
  .sitemap-col ul li{ padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .sitemap-col ul li::before{ display: none;}
  .sitemap-col ul li:last-child{ border-bottom: 0;}
  .sitemap-col a{
    display: flex; justify-content: space-between; align-items: center;
    color: var(--ink) !important;
    border: 0 !important;
    font-size: 14px;
    font-family: var(--f-sans);
  }
  .sitemap-col a small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .sitemap-col a:hover{ color: var(--orange) !important;}

  @media (max-width: 900px){
    .legal-grid{ grid-template-columns: 1fr; gap: 32px;}
    .legal-toc{ position: static;}
    .sitemap-grid{ grid-template-columns: 1fr;}
    .legal-content .info-block dl{ grid-template-columns: 1fr;}
  }


/* ===== from cookies.html ===== */

  .legal-hero{ padding: clamp(120px, 11vw, 170px) var(--pad-x) clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line);}
  .legal-hero-inner{ max-width: 1100px; margin: 0 auto;}
  .legal-hero h1{ font-size: clamp(48px, 7vw, 100px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; margin: 0;}
  .legal-hero h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .legal-hero .meta{
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 24px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-hero .meta b{ color: var(--ink); font-weight: 500;}
  .legal-body{ padding: clamp(48px, 6vw, 96px) var(--pad-x); }
  .legal-grid{ max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start;}
  .legal-toc{ position: sticky; top: 100px;}
  .legal-toc h5{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
  }
  .legal-toc a{
    display: block;
    font-family: var(--f-sans);
    font-size: 13.5px;
    color: var(--muted);
    padding: 8px 0;
    border-top: 1px solid var(--line);
    transition: color .2s;
  }
  .legal-toc a:hover{ color: var(--orange);}
  .legal-content h2{
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.025em;
    font-weight: 500;
    margin: 48px 0 14px;
    scroll-margin-top: 100px;
  }
  .legal-content h2:first-child{ margin-top: 0;}
  .legal-content h2 .num{
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--orange);
    margin-right: 12px;
  }
  .legal-content h3{
    font-size: 16px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink);
    margin: 20px 0 8px;
  }
  .legal-content p, .legal-content li{
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 14px;
  }
  .legal-content ul{
    padding-left: 0;
    list-style: none;
    margin: 0 0 18px;
  }
  .legal-content ul li{
    position: relative;
    padding-left: 22px;
  }
  .legal-content ul li::before{
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 1px;
    background: var(--orange);
  }
  .legal-content a{ color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s, color .2s;}
  .legal-content a:hover{ color: var(--orange); border-color: var(--orange);}
  .legal-content .info-block{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 24px 0;
  }
  .legal-content .info-block h4{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--orange);
    margin: 0 0 12px;
    font-weight: 500;
  }
  .legal-content .info-block dl{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 24px;
    margin: 0;
  }
  .legal-content .info-block dt{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-content .info-block dd{
    margin: 0;
    font-size: 14.5px;
    color: var(--ink);
  }

  /* Sitemap */
  .sitemap-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
  }
  .sitemap-col{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .sitemap-col h3{
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .sitemap-col h3 .num{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--orange); margin-right: 10px;
  }
  .sitemap-col ul{ padding: 0; margin: 0; list-style: none;}
  .sitemap-col ul li{ padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .sitemap-col ul li::before{ display: none;}
  .sitemap-col ul li:last-child{ border-bottom: 0;}
  .sitemap-col a{
    display: flex; justify-content: space-between; align-items: center;
    color: var(--ink) !important;
    border: 0 !important;
    font-size: 14px;
    font-family: var(--f-sans);
  }
  .sitemap-col a small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .sitemap-col a:hover{ color: var(--orange) !important;}

  @media (max-width: 900px){
    .legal-grid{ grid-template-columns: 1fr; gap: 32px;}
    .legal-toc{ position: static;}
    .sitemap-grid{ grid-template-columns: 1fr;}
    .legal-content .info-block dl{ grid-template-columns: 1fr;}
  }


/* ===== from sitemap.html ===== */

  .legal-hero{ padding: clamp(120px, 11vw, 170px) var(--pad-x) clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line);}
  .legal-hero-inner{ max-width: 1100px; margin: 0 auto;}
  .legal-hero h1{ font-size: clamp(48px, 7vw, 100px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; margin: 0;}
  .legal-hero h1 em{ font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400;}
  .legal-hero .meta{
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 24px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-hero .meta b{ color: var(--ink); font-weight: 500;}
  .legal-body{ padding: clamp(48px, 6vw, 96px) var(--pad-x); }
  .legal-grid{ max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start;}
  .legal-toc{ position: sticky; top: 100px;}
  .legal-toc h5{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
  }
  .legal-toc a{
    display: block;
    font-family: var(--f-sans);
    font-size: 13.5px;
    color: var(--muted);
    padding: 8px 0;
    border-top: 1px solid var(--line);
    transition: color .2s;
  }
  .legal-toc a:hover{ color: var(--orange);}
  .legal-content h2{
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.025em;
    font-weight: 500;
    margin: 48px 0 14px;
    scroll-margin-top: 100px;
  }
  .legal-content h2:first-child{ margin-top: 0;}
  .legal-content h2 .num{
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--orange);
    margin-right: 12px;
  }
  .legal-content h3{
    font-size: 16px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink);
    margin: 20px 0 8px;
  }
  .legal-content p, .legal-content li{
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 14px;
  }
  .legal-content ul{
    padding-left: 0;
    list-style: none;
    margin: 0 0 18px;
  }
  .legal-content ul li{
    position: relative;
    padding-left: 22px;
  }
  .legal-content ul li::before{
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 1px;
    background: var(--orange);
  }
  .legal-content a{ color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s, color .2s;}
  .legal-content a:hover{ color: var(--orange); border-color: var(--orange);}
  .legal-content .info-block{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 24px 0;
  }
  .legal-content .info-block h4{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--orange);
    margin: 0 0 12px;
    font-weight: 500;
  }
  .legal-content .info-block dl{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 24px;
    margin: 0;
  }
  .legal-content .info-block dt{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .legal-content .info-block dd{
    margin: 0;
    font-size: 14.5px;
    color: var(--ink);
  }

  /* Sitemap */
  .sitemap-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
  }
  .sitemap-col{
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .sitemap-col h3{
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .sitemap-col h3 .num{
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--orange); margin-right: 10px;
  }
  .sitemap-col ul{ padding: 0; margin: 0; list-style: none;}
  .sitemap-col ul li{ padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .sitemap-col ul li::before{ display: none;}
  .sitemap-col ul li:last-child{ border-bottom: 0;}
  .sitemap-col a{
    display: flex; justify-content: space-between; align-items: center;
    color: var(--ink) !important;
    border: 0 !important;
    font-size: 14px;
    font-family: var(--f-sans);
  }
  .sitemap-col a small{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .sitemap-col a:hover{ color: var(--orange) !important;}

  @media (max-width: 900px){
    .legal-grid{ grid-template-columns: 1fr; gap: 32px;}
    .legal-toc{ position: static;}
    .sitemap-grid{ grid-template-columns: 1fr;}
    .legal-content .info-block dl{ grid-template-columns: 1fr;}
  }