/* ---------- header ---------- */
  
.brand-list{
    margin:0 auto;
    padding: 0 150px 0;
  }
  
  .top{
    padding:40px 48px 22px;
  }
  .brand-row{
    display:flex;
    align-items:center;
    gap:22px;
    margin-bottom:18px;
  }


  .brand-name .title-main{
    font-size:clamp(30px,4vw,44px);
    font-weight:800;
    letter-spacing:0.5px;
    color:var(--navy);
    white-space:nowrap;
  }
  .brand-name .title-main sup{
    font-size:15px;
    top:-1.6em;
  }
  .brand-name .tagline{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:600;
    color:var(--red);
    font-size:clamp(18px,2.6vw,28px);
    margin-top:2px;
  }

  .rule{
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0 20px;
  }
  .rule .bar{
    height:1px;
    background:var(--red);
    flex:1;
  }
  .rule .diamond{
    width:6px;height:6px;
    background:var(--red);
    transform:rotate(45deg);
    flex-shrink:0;
  }

  .intro{
    text-align:center;
    max-width:820px;
    margin:0 auto;
    font-size:15.5px;
    font-weight:600;
    color:var(--navy);
    line-height:1.6;
  }

  /* ---------- skills panels ---------- */
  .panels{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding:28px 48px 40px;
  }
  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    padding:26px 28px 30px;
  }
  .panel h2{
    font-size:23px;
    font-weight:800;
    letter-spacing:0.3px;
    color:var(--navy);
    margin:0 0 8px;
	text-align: center
  }
  .panel .rule{margin:0 0 18px;}

  .skill-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .skill-list li{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .skill-list .icon{
    width:34px;
    height:34px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .skill-list .icon svg{
        width: 46px;
    height: 46px;
  }
  .skill-list span.label{
    font-size:18.5px;
    font-weight:700;
    color:var(--navy);
    line-height:1.3;
  }

  /* ---------- bottom banner ---------- */
  .banner{
    background:var(--navy);
    color:#fff;
    text-align:center;
    padding:34px 40px 30px;
  }
  .banner p.summary{
    font-size:16px;
    line-height:1.7;
    max-width:900px;
    margin:0 auto 18px;
    font-weight:500;
  }
  .banner .rule{
    max-width:640px;
    margin:0 auto 16px;
  }
  .banner .rule .bar{background:var(--red);}
  .banner h3{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:700;
    font-size:clamp(20px,3.2vw,32px);
    color:var(--red);
    text-shadow_:0 0 14px rgba(255,255,255,0.55);
    margin:0 0 14px;
    line-height:1.3;
  }
  .banner .since{
    font-size:12.5px;
    letter-spacing:1.5px;
    color:rgba(255,255,255,0.85);
    font-weight:600;
  }

  /* ---------- responsive ---------- */
  @media (max-width:860px){
	.brand-list{padding: 0 50px 0;}
    .panels{
      grid-template-columns:1fr;
      padding:24px 28px 32px;
    }
    .top{padding:32px 28px 18px;}
    .banner{padding:30px 24px 26px;}
  }

  @media (max-width:600px){
	  
	.brand-list{padding: 0 15px 0;}
    .brand-row{gap:14px;}

    .brand-name .title-main{font-size:24px;white-space:normal;}
    .brand-name .tagline{font-size:16px;}
    .intro{font-size:14px;}
    .panel h2{font-size:19px;}
    .skill-list span.label{font-size:13.5px;}
  }