:root{
    --night:#0C1030;
    --night-2:#141A47;
    --panel:#191D47;        /* card on dark */
    --panel-2:#171B43;
    --rose:#FF5E86;
    --coral:#FF7E47;
    --gold:#FFB23E;
    --cream:#FFF4E8;        /* light bg */
    --cream-2:#FBEADD;
    --ink:#15183A;          /* text on light */
    --muted:#54577F;        /* caption on light */
    --light:#FFF4E8;
    --light-dim:rgba(255,244,232,.66);
    --line:rgba(21,24,58,.12);
    --line-dark:rgba(255,244,232,.13);
    --grad:linear-gradient(120deg,#FF5E86 0%, #FF7E47 52%, #FFB23E 100%);
  }
  *{box-sizing:border-box;}
  html{ -webkit-text-size-adjust:100%; }
  @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
  body{ margin:0; font-family:"Murecho", system-ui, sans-serif; background:var(--cream); color:var(--ink); line-height:1.8; font-size:16px; -webkit-font-smoothing:antialiased; }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  ::selection{ background:var(--coral); color:#fff; }
  :focus-visible{ outline:2.5px solid var(--coral); outline-offset:3px; border-radius:3px; }

  .wrap{ width:min(1100px,90vw); margin-inline:auto; }
  .label-font{ font-family:"Space Grotesk", sans-serif; }

  .eyebrow{ font-family:"Space Grotesk", sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#D6456A; margin:0 0 1.2rem; display:inline-flex; align-items:center; gap:.7rem; }
  .eyebrow::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--grad); flex:none; }
  .section-dark .eyebrow{ color:var(--gold); }

  /* buttons */
  .btn-row{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2.1rem; }
  .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.7rem; border-radius:50px; font-family:"Murecho",sans-serif; font-weight:700; font-size:.95rem; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease; }
  .btn-sun{ background:var(--gold); color:#241433; box-shadow:0 8px 24px rgba(255,158,77,.35); }
  .btn-sun:hover{ transform:translateY(-2px); background:linear-gradient(120deg,#FF8A52,#FFC04E); box-shadow:0 12px 30px rgba(255,158,77,.45); }
  .btn-line-light{ background:transparent; color:var(--light); border-color:rgba(255,244,232,.45); }
  .btn-line-light:hover{ border-color:var(--gold); background:rgba(255,178,62,.12); }
  .btn-ink{ background:var(--ink); color:var(--cream); }
  .btn-ink:hover{ transform:translateY(-2px); background:#262a55; }

  /* NAV */
  header.nav{ position:sticky; top:0; z-index:60; color:var(--light); background:rgba(10,13,40,.85); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid rgba(255,244,232,.1); }
  .nav-in{ width:min(1100px,90vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; height:64px; }
  .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
  .brand .mark{ width:18px; height:18px; border-radius:50%; background:var(--grad); box-shadow:0 0 14px rgba(255,150,80,.6); flex:none; }
  .brand .jp{ font-family:"Murecho",sans-serif; font-weight:800; font-size:1.18rem; letter-spacing:.04em; color:var(--light); }
  .nav-links{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
  .nav-links a{ text-decoration:none; font-size:.84rem; font-weight:500; letter-spacing:.04em; color:rgba(255,244,232,.78); padding:.3rem 0; position:relative; white-space:nowrap; }
  .nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--grad); transition:width .28s ease; }
  .nav-links a:hover{ color:var(--light); }
  .nav-links a:hover::after{ width:100%; }
  .nav-burger{ display:none; background:none; border:1px solid rgba(255,244,232,.3); color:var(--light); border-radius:7px; padding:.4rem .7rem; font-family:"Space Grotesk",sans-serif; font-size:.78rem; letter-spacing:.1em; cursor:pointer; }

  /* HERO */
  .hero{ position:relative; overflow:hidden; color:var(--light);
    background:linear-gradient(176deg, #0B0E2C 0%, #18164A 24%, #4A2569 46%, #A23C6B 64%, #FF7E47 82%, #FFC25A 99%); }
  .hero-inner{ position:relative; z-index:3; width:min(1100px,90vw); margin-inline:auto; min-height:clamp(580px,90vh,880px); display:flex; flex-direction:column; justify-content:center; padding:7rem 0 5rem; }
  .hero-copy{ max-width:660px; }
  .hero-copy .eyebrow{ color:var(--gold); }
  .hero h1{ font-family:"Dela Gothic One", sans-serif; font-weight:400; font-size:clamp(3rem,9vw,6.4rem); line-height:1.02; margin:.2rem 0 1.6rem; letter-spacing:.01em; text-shadow:0 2px 40px rgba(8,10,30,.4); }
  .hero h1 em{ font-style:normal; white-space:nowrap; background:linear-gradient(120deg,#FFE08A,#FFB14E); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero-lead{ font-size:1.08rem; max-width:46ch; color:rgba(255,244,232,.92); margin:0; text-shadow:0 1px 24px rgba(8,10,30,.4); }
  .hero-lead b{ color:#FFE0A0; font-weight:700; }
  .hero-meta{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:2.2rem; font-family:"Space Grotesk",sans-serif; font-size:.76rem; letter-spacing:.1em; color:rgba(255,244,232,.62); }
  .hero-meta span{ display:inline-flex; align-items:center; gap:.5rem; }
  .hero-meta span::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--gold); }

  /* sun + sky decor */
  .sun{ position:absolute; right:-2%; bottom:6%; width:min(46vw,470px); aspect-ratio:1; border-radius:50%; z-index:1;
    background:radial-gradient(circle at 50% 50%, #FFF7DC 0%, #FFDA73 24%, #FFA254 48%, rgba(255,138,71,.25) 66%, rgba(255,138,71,0) 75%);
    filter:saturate(115%); }
  .sun-glow{ position:absolute; right:-2%; bottom:6%; width:min(46vw,470px); aspect-ratio:1; border-radius:50%; z-index:0; box-shadow:0 0 160px 70px rgba(255,170,80,.5); }
  .haze{ position:absolute; left:0; right:0; bottom:14%; height:2px; background:linear-gradient(90deg, transparent, rgba(255,224,160,.55), transparent); z-index:1; filter:blur(1px); }
  .motes{ position:absolute; inset:0; z-index:2; pointer-events:none; }
  .mote{ position:absolute; bottom:8%; width:5px; height:5px; border-radius:50%; background:rgba(255,232,180,.85); box-shadow:0 0 8px rgba(255,210,140,.8); opacity:0; }
  .scroll-cue{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3; font-family:"Space Grotesk",sans-serif; font-size:.66rem; letter-spacing:.26em; color:rgba(36,20,40,.6); display:flex; flex-direction:column; align-items:center; gap:.4rem; }
  .scroll-cue .bar{ width:1px; height:34px; background:linear-gradient(rgba(36,20,40,.5), transparent); }

  /* sections */
  section{ scroll-margin-top:74px; }
  .pad{ padding:6rem 0; }
  .sec-head{ max-width:64ch; margin-bottom:3.2rem; }
  .sec-head h2{ font-family:"Murecho",sans-serif; font-weight:800; font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.2; margin:0 0 1rem; letter-spacing:.01em; }
  .sec-head p{ color:var(--muted); margin:0; font-size:1.04rem; }
  .section-dark{ background:var(--night); color:var(--light); }
  .section-dark .sec-head h2{ color:var(--light); }
  .section-dark .sec-head p{ color:var(--light-dim); }

  /* ABOUT (light, manifesto) */
  .about{ background:var(--cream); }
  .manifesto{ font-family:"Murecho",sans-serif; font-weight:500; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.6; max-width:18ch; margin:0 0 2rem; letter-spacing:.01em; }
  .manifesto .g{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
  .about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:start; }
  .about-grid p{ margin:0 0 1.1rem; font-size:1.02rem; color:#3A3D5E; }
  .about-grid p:last-child{ margin-bottom:0; }

  /* BUSINESS (dark, pillars) */
  .pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; }
  .pillar{ position:relative; background:var(--panel); border:1px solid var(--line-dark); border-radius:18px; padding:2rem 2rem 2.1rem; overflow:hidden; opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease, box-shadow .3s ease, border-color .3s ease; }
  .pillar.in{ opacity:1; transform:none; }
  .pillar:hover{ box-shadow:0 22px 44px rgba(0,0,0,.34); border-color:rgba(255,178,62,.45); transform:translateY(-4px); }
  .pillar::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad); }
  .pillar::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 34%, rgba(255,200,120,.16) 48%, rgba(255,120,90,.12) 56%, transparent 68%); opacity:0; transform:translateX(-18%); transition:opacity .35s ease, transform .7s ease; pointer-events:none; }
  .pillar:hover::after{ opacity:1; transform:translateX(12%); }
  .pillar .ptop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
  .pillar .sym{ width:46px; height:46px; border-radius:13px; display:grid; place-content:center; font-size:1.4rem; background:rgba(255,178,62,.14); color:var(--gold); }
  .pillar .ptag{ font-family:"Space Grotesk",sans-serif; font-size:.62rem; font-weight:600; letter-spacing:.14em; color:var(--light-dim); border:1px solid var(--line-dark); border-radius:30px; padding:.2rem .6rem; }
  .pillar .pnum{ font-family:"Space Grotesk",sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.1em; color:var(--coral); }
  .pillar h3{ font-family:"Murecho",sans-serif; font-weight:800; font-size:1.45rem; margin:.4rem 0 .6rem; color:var(--light); }
  .pillar p{ margin:0; font-size:.97rem; color:var(--light-dim); line-height:1.8; }
  .pillar .fine{ display:block; margin-top:.9rem; padding-top:.75rem; border-top:1px dashed var(--line-dark); font-size:.8rem; color:rgba(255,244,232,.5); }

  /* PRINCIPLES (light) */
  .principles{ background:var(--cream-2); }
  .plist{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem 3.4rem; }
  .principle{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start; padding:1.9rem 0; border-bottom:1px solid var(--line); }
  .principle .pno{ font-family:"Dela Gothic One",sans-serif; font-size:1.7rem; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .principle h3{ font-family:"Murecho",sans-serif; font-weight:800; font-size:1.16rem; margin:.05rem 0 .5rem; color:var(--ink); }
  .principle p{ margin:0; color:#45486A; font-size:.96rem; }

  /* CONTENT (dark, cards) */
  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  .card{ position:relative; background:var(--panel-2); border:1px solid var(--line-dark); border-radius:16px; padding:1.6rem; overflow:hidden; opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease, box-shadow .28s ease, border-color .28s ease; }
  .card.in{ opacity:1; transform:none; }
  .card:hover{ transform:translateY(-5px); box-shadow:0 20px 38px rgba(0,0,0,.34); border-color:rgba(255,178,62,.42); }
  .card::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 34%, rgba(255,200,120,.15) 48%, rgba(255,120,90,.12) 56%, transparent 66%); opacity:0; transform:translateX(-18%); transition:opacity .35s ease, transform .7s ease; pointer-events:none; }
  .card:hover::after{ opacity:1; transform:translateX(12%); }
  .card .kind{ position:absolute; top:1.5rem; right:1.5rem; font-family:"Space Grotesk",sans-serif; font-size:.58rem; font-weight:600; letter-spacing:.12em; color:var(--gold); border:1px solid rgba(255,178,62,.4); border-radius:30px; padding:.16rem .56rem; }
  .card .cat{ display:block; font-family:"Space Grotesk",sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.14em; color:var(--coral); padding-right:5rem; }
  .card h4{ font-family:"Murecho",sans-serif; font-weight:800; font-size:1.28rem; margin:.6rem 0 .5rem; color:var(--light); }
  .card p{ margin:0; font-size:.9rem; color:var(--light-dim); line-height:1.7; }

  /* COMPANY (light) */
  .company{ background:var(--cream); }
  .co-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 3.4rem; }
  .co-grid dl{ margin:0; }
  .co-row{ display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
  .co-row dt{ font-family:"Space Grotesk",sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.06em; color:#D6456A; padding-top:.25rem; }
  .co-row dd{ margin:0; color:var(--ink); }
  .co-note{ margin-top:1.4rem; font-size:.8rem; color:var(--muted); }

  /* CAREERS (dark) */
  .careers-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:3rem; align-items:start; }
  .clead{ font-family:"Murecho",sans-serif; font-weight:800; font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.5; margin:0 0 1.2rem; color:var(--light); }
  .clead .g{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .csub{ color:var(--light-dim); margin:0 0 1.7rem; }
  .roles{ border-top:1px solid var(--line-dark); }
  .role{ display:flex; align-items:center; gap:1rem; padding:1.2rem 0; border-bottom:1px solid var(--line-dark); transition:padding-left .25s ease; }
  .role:hover{ padding-left:.6rem; }
  .role .rtitle{ font-weight:700; color:var(--light); font-size:1.04rem; }
  .role .rdesc{ color:rgba(255,244,232,.5); font-size:.85rem; }
  .role .rtag{ margin-left:auto; font-family:"Space Grotesk",sans-serif; font-size:.6rem; font-weight:600; letter-spacing:.1em; color:var(--gold); border:1px solid rgba(255,178,62,.4); border-radius:30px; padding:.18rem .6rem; white-space:nowrap; }

  /* CONTACT (light) */
  .contact{ background:var(--cream-2); }
  .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3.4rem; align-items:start; }
  .contact-cats{ list-style:none; margin:1.4rem 0 0; padding:0; }
  .contact-cats li{ padding:.7rem 0; border-bottom:1px solid var(--line); display:flex; gap:.7rem; align-items:baseline; }
  .contact-cats li::before{ content:""; width:8px;height:8px;border-radius:50%; background:var(--grad); transform:translateY(.4em); flex:none; }
  .cform{ display:grid; gap:1.1rem; }
  .field{ display:grid; gap:.4rem; }
  .field label{ font-family:"Space Grotesk",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
  .field input, .field select, .field textarea{ font-family:inherit; font-size:.95rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; padding:.75rem .9rem; width:100%; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--coral); outline-offset:1px; border-color:var(--coral); }
  .field textarea{ min-height:120px; resize:vertical; }
  .form-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
  .form-note{ font-size:.82rem; color:var(--muted); }

  /* FOOTER */
  footer.foot{ background:var(--night); color:rgba(255,244,232,.7); padding:3.4rem 0 2.4rem; }
  .foot-top{ display:grid; grid-template-columns:1.3fr 1fr; gap:2.4rem; padding-bottom:2.2rem; }
  .foot-top .brand .jp{ color:var(--light); }
  .foot small{ display:block; font-size:.78rem; line-height:1.7; max-width:46ch; margin-top:1rem; color:rgba(255,244,232,.5); }
  .foot-nav{ display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; align-content:start; }
  .foot-nav a{ text-decoration:none; font-size:.85rem; color:rgba(255,244,232,.72); }
  .foot-nav a:hover{ color:var(--light); }
  .foot-rule{ height:2px; background:var(--grad); opacity:.8; border-radius:2px; }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1.4rem; flex-wrap:wrap; padding-top:1.6rem; }
  .foot .copy{ font-family:"Space Grotesk",sans-serif; font-size:.72rem; letter-spacing:.08em; }

  /* responsive */
  @media (max-width: 980px){
    .nav-links{ display:none; }
    .nav-burger{ display:inline-block; }
    .nav-links.open{ display:flex; flex-direction:column; gap:1rem; position:absolute; top:64px; left:0; right:0; background:rgba(10,13,40,.98); padding:1.4rem 5vw; border-bottom:1px solid rgba(255,244,232,.1); }
    .about-grid, .co-grid, .careers-grid, .contact-grid, .foot-top{ grid-template-columns:1fr; gap:2.2rem; }
    .pillars, .plist{ grid-template-columns:1fr; }
    .plist{ gap:0; }
    .cards{ grid-template-columns:1fr 1fr; }
    .sun, .sun-glow{ width:min(70vw,320px); right:-18%; bottom:auto; top:2%; opacity:.5; }
    .hero-inner{ min-height:auto; padding:8rem 0 5rem; }
    .scroll-cue{ display:none; }
  }
  @media (max-width: 520px){
    .cards{ grid-template-columns:1fr; }
    .pillar{ padding:1.6rem; }
    .role{ flex-wrap:wrap; }
    .role .rtag{ margin-left:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .pillar, .card{ opacity:1; transform:none; transition:none; }
    .pillar::after, .card::after{ display:none; }
    .mote{ display:none; }
  }
  @keyframes drift{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:.85; } 100%{ transform:translateY(-140px); opacity:0; } }

  /* ===== additions: featured nav + media card + article page ===== */
  .nav-oripa{ color:var(--gold); }
  .nav-oripa:hover{ color:var(--gold); }
  .foot-nav a.nav-oripa{ color:var(--gold); }

  a.card{ text-decoration:none; display:block; color:inherit; }
  .card .read{ display:inline-block; margin-top:.9rem; font-family:"Murecho",sans-serif; font-weight:700; font-size:.9rem; color:var(--gold); }
  .card-feature{ border-color:rgba(255,178,62,.5); }
  .card-feature::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); z-index:1; }

  .btn-line-ink{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-line-ink:hover{ border-color:var(--coral); background:rgba(255,126,71,.08); }

  .article-page{ background:var(--cream-2); }
  .article-hero{ padding-top:2.4rem; scroll-margin-top:74px; }
  .crumbs{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-family:"Space Grotesk",sans-serif; font-size:.78rem; color:var(--muted); }
  .crumbs a{ text-decoration:none; color:var(--muted); }
  .crumbs a:hover{ color:#D6456A; }
  .crumbs .sep{ opacity:.45; }
  .crumbs .cur{ color:var(--ink); font-weight:700; }
  .article-hero .eyebrow{ margin-top:1.1rem; margin-bottom:0; }
  .article-wrap{ padding:0 0 5rem; }
  .post{ background:#fff; max-width:900px; margin:1.6rem auto 0; padding:clamp(1.5rem,4vw,3rem); border:1px solid var(--line); border-radius:18px; box-shadow:0 22px 54px rgba(21,24,58,.09); }
  .post > :first-child{ margin-top:0; }
  .post h1{ font-family:"Murecho",sans-serif; font-weight:800; font-size:clamp(1.6rem,3.8vw,2.35rem); line-height:1.45; margin:0 0 1em; color:var(--ink); letter-spacing:.01em; }
  .post h2{ position:relative; font-family:"Murecho",sans-serif; font-weight:800; font-size:clamp(1.3rem,3vw,1.6rem); line-height:1.45; margin:2.4em 0 .8em; padding-left:16px; color:var(--ink); }
  .post h2::before{ content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:5px; border-radius:3px; background:var(--grad); }
  .post h3{ font-family:"Murecho",sans-serif; font-weight:700; font-size:clamp(1.06rem,2.4vw,1.24rem); margin:1.9em 0 .5em; color:#2b2e54; }
  .post p{ margin:0 0 1.15em; color:#34375c; font-size:1rem; line-height:1.95; }
  .post ul,.post ol{ margin:0 0 1.2em; padding-left:1.4em; color:#34375c; }
  .post li{ margin:.35em 0; line-height:1.8; }
  .post li::marker{ color:var(--coral); }
  .post a{ color:#D6456A; text-decoration:underline; text-underline-offset:2px; }
  .post a:hover{ color:var(--coral); }
  .post strong,.post b{ color:var(--ink); }
  .post table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:1.5em 0; font-size:.92rem; -webkit-overflow-scrolling:touch; }
  .post th,.post td{ border:1px solid var(--line); padding:10px 13px; vertical-align:top; text-align:left; line-height:1.7; }
  .post th{ background:var(--cream-2); font-weight:700; color:var(--ink); white-space:nowrap; }
  .post tbody tr:nth-child(even) td{ background:#FFF7EF; }
  .post hr{ border:none; border-top:1px solid var(--line); margin:2em 0; }
  .article-cta{ max-width:900px; margin:2rem auto 0; display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; justify-content:space-between; }
  .article-cta .note{ font-size:.85rem; color:var(--muted); }
  .article-cta .links{ display:flex; gap:.8rem; flex-wrap:wrap; }
  @media (max-width:520px){ .article-cta{ flex-direction:column; align-items:flex-start; } }