/* ===== HERO ===== */
    .hero{position:relative;min-height:100svh;overflow:hidden;background:#000}
    .hero__poster{
      position:absolute;inset:0;
      background:#000 url("assets/hero-poster.jpg") center/cover no-repeat;
      z-index:0;opacity:1;
      transition:opacity .5s ease
    }
    .hero__videoWrap{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s ease;}
    .hero__videoWrap .shdw{
      background: url(../assets/hdr-bg.png) repeat-x top;
      height: 97px;
      position: absolute;
      left: 0; top: 0; right: 0;
      z-index: 10;
    }
    .hero__video{width:100%;height:100%;object-fit:cover;display:block}
    .hero__overlay{
      position:absolute;inset:0;z-index:2;
      background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12) 40%, rgba(0,0,0,.26));
      pointer-events:none
    }
    .hero__content{
      position:relative;z-index:3;
      min-height:100svh;
      display:grid;place-items:center;
      padding:120px 20px 84px;
      text-align:center;
      color:var(--white)
    }
    .hero__title{
      margin:0 0 10px;
      font-weight:300;
      letter-spacing:.16em;
      text-transform:uppercase;
      font-size:clamp(32px,4.2vw,60px);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
    }
    .hero__subtitle{
      margin:0 0 26px;
      font-size:13px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(255,255,255,.75)
    }
    .hero__ctaRow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
    .btn{
      min-width:160px;
      padding:14px 22px;
      border-radius:2px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.10);
      color:#fff;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-size:12px;
      cursor:pointer;
      transition:transform var(--t), border-color var(--t), background var(--t)
    }
    .btn--gold{background:var(--gold);border-color:transparent}
    .btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.35)}
    .btn--gold:hover{background:#b89363;border-color:transparent}
    
    /* speaker */
    .muteBtn{
      position:absolute;right:18px;bottom:18px;
      z-index:4;opacity:0;transform:translateY(8px);
      transition:opacity .35s ease, transform .35s ease
    }
    .muteBtn.is-visible{opacity:1;transform:translateY(0)}
    .speaker-btn{
      width:44px;height:44px;border:0;background:transparent;
      color:rgba(255,255,255,.95);
      cursor:pointer;display:grid;place-items:center
    }
    .speaker-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
    
    /* ===== Home content sections ===== */
    .sfnt{ text-align:center; padding:5% 0; font-size:16px; letter-spacing:2px;}
    .sfnt h2{ font-weight:normal; margin-bottom:25px; font-size:24px; letter-spacing:1px;}
    
    .pro_wrap{
      max-width:var(--max);
      margin:0 auto;
      padding:48px 20px 84px;
    }
    
    /* ===== Section layout ===== */
    .grid{
      display:flex;
      flex-direction:column;
      gap:100px;
    }
    .grid--top{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:var(--gap);
      align-items:start;
    }
    .grid--bottom{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:var(--gap);
      align-items:start;
    }
    
    /* ===== Card ===== */
    .card{ display:block; }
    .card__media{
      position:relative;
      overflow:hidden;
      background:rgba(0,0,0,.06);
    }
    .card__media img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      transform:scale(1);
      transition:transform .6s ease;
    }
    @media (hover:hover) and (pointer:fine){
      .card:hover .card__media img{transform:scale(1.03)}
    }
    
    /* Aspect ratios */
    .ratio-portrait{aspect-ratio: 3 / 4;}
    .ratio-tall{aspect-ratio: 3 / 4;}
    
    /* Typography */
    .meta{
      text-align:center;
      padding:34px 10px 0;
      line-height:1.25;
    }
    .meta__title{
      font-size:14px;
      letter-spacing:.06em;
      color:rgba(0,0,0,.70);
      margin:0 0 6px;
    }
    .meta__sub{
      font-size:16px;
      letter-spacing:.12em;
      text-transform:none;
      color:var(--accent);
      margin:0;
    }
    .meta.meta--spaced{padding-top:34px}
    
    /* ===== Story / Journal blocks ===== */
    .ptl-storywrap{
      max-width: var(--ptl-max);
      margin: 0 auto;
      padding: 80px 20px 90px;
    }
    
    /* TOP: image left + text right */
    .ptl-storytop{
      display:grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
      gap: 0;      
    }
    .ptl-storyimg{
      display:flex;
      align-items:center;
      justify-content:center;
      background: var(--bg);
    }
    .ptl-storyimg img{
      width: 100%;
      height: auto;
      object-fit: contain;
	  max-width: 100%;
    }
    .ptl-storytext{
      background: #ece8da;
      display:flex;
      align-items:center;
      padding: 56px 56px;
    }
    .ptl-storytextInner{ max-width: 600px; }
    
    .ptl-storyh{
      margin: 0 0 22px;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: .01em;
      color: var(--ptl-ink);
    }
    .ptl-storyp{
      margin: 0 0 22px;
      font-size: 14px;
      line-height: 2.0;
      color: rgba(0,0,0,.62);
      letter-spacing: .01em;
    }
    .ptl-storyp:last-child{ margin-bottom: 0; }
    
    .ptl-storyspacer{ height: 34px; }
    
    /* BOTTOM: 3 cards */
    .ptl-jgrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--ptl-gap);
    }
    .ptl-jcard{ display:block; }
    .ptl-jmedia{
      position:relative;
      overflow:hidden;
      background: rgba(0,0,0,.06);
      aspect-ratio: 4 / 3;
    }
    .ptl-jmedia img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      transform: scale(1);
      transition: transform .6s ease;
    }
    @media (hover:hover) and (pointer:fine){
      .ptl-jcard:hover .ptl-jmedia img{ transform: scale(1.03); }
    }
    .ptl-jmeta{ padding-top: 34px; line-height: 1.35; }
    .ptl-jtitle{
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .01em;
      color: var(--ptl-ink);
    }
    .ptl-jdesc{
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.7;
      color: rgba(0,0,0,.62);
    }
    .ptl-jlink{
      display:inline-block;
      font-size: 12px;
      letter-spacing: .08em;
      color: var(--ptl-accent);
      text-transform:none;
    }
    .ptl-jlink:hover{
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    
    /* ===== Responsive (home content only) ===== */
    @media (max-width:1024px){
      :root{ --gap:18px; }
      .pro_wrap{ padding:36px 16px 54px; }
      .grid{ gap:34px; }
    
      .ptl-storywrap{ padding: 60px 16px 70px; }
      .ptl-storytop{ gap: 26px; grid-template-columns: 1.15fr .85fr; }
      .ptl-storytext{ padding: 44px 34px; }
    }
    
    @media (max-width:768px){
      .grid--top{ grid-template-columns: 1fr; }
      .grid--bottom{ grid-template-columns: 1fr; }
      .meta__title{ font-size:13px; }
      .meta__sub{ font-size:12px; }
      .pro_wrap{ padding:28px 14px 44px; }
    
      .ptl-storytop{ grid-template-columns: 1fr; gap: 18px; display: block; }
      .ptl-storyimg{ /*aspect-ratio: 16 / 10;*/ }
      .ptl-storytext{ padding: 28px 18px 30px; }
      .ptl-storytextInner{ max-width: 100%; }
    
      .ptl-jgrid{ grid-template-columns: 1fr; gap: 22px; }
      .ptl-jmedia{ aspect-ratio: 16 / 10; }
    }
    
    @media (prefers-reduced-motion: reduce){
      .hero__poster,.hero__videoWrap{transition:none}
    }