/* Page-specific styles for about.html. Extracted without changing rule order or values. */

:root{
      --about-bg:#0b0f14;
      --about-panel:#121923;
      --about-panel-hover:#17212d;
      --about-border:rgba(255,255,255,.10);
      --about-text:#ffffff;
      --about-muted:#aab6c3;
      --about-accent:#57c7ff;
      --about-accent-soft:#a9e4ff;
      --about-success:#8de6bf;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--about-bg);color:var(--about-text)}

    .about-page{
      min-height:100vh;
      overflow:hidden;
    }

    .about-page h1,
    .about-page h2,
    .about-page h3,
    .about-page p,
    .about-page span,
    .about-page a{
      writing-mode:horizontal-tb !important;
      text-orientation:mixed !important;
      word-break:normal;
      overflow-wrap:normal;
      white-space:normal;
    }

    .about-page h1,
    .about-page h2,
    .about-page h3{
      width:auto !important;
      max-width:none;
    }

    .about-shell{
      width:min(1180px,100%);
      margin:0 auto;
    }

    .about-hero{
      position:relative;
      padding:10rem 1.5rem 5.5rem;
      overflow:hidden;
      border-bottom:1px solid var(--about-border);
    }

    .about-hero::before{
      content:"";
      position:absolute;
      width:44rem;
      height:44rem;
      top:-22rem;
      right:-12rem;
      border-radius:50%;
      background:rgba(87,199,255,.15);
      filter:blur(80px);
      pointer-events:none;
    }

    .about-hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
      gap:3rem;
      align-items:center;
    }

    .about-eyebrow{
      margin:0 0 1rem;
      color:var(--about-accent);
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.18em;
      text-transform:uppercase;
    }

    .about-hero-title{
      display:block;
      width:100% !important;
      max-width:760px !important;
      margin:0;
      font-size:clamp(3.25rem,7vw,6.5rem);
      line-height:.95;
      letter-spacing:-.06em;
      writing-mode:horizontal-tb !important;
      text-orientation:mixed !important;
      word-break:normal !important;
      overflow-wrap:normal !important;
      white-space:normal !important;
    }

    .hero-role{
      display:block;
      margin-top:1.2rem;
      color:var(--about-accent-soft);
      font-size:clamp(1.1rem,2.3vw,1.55rem);
      font-weight:700;
      line-height:1.45;
    }

    .hero-copy{
      max-width:700px;
      margin:1.3rem 0 0;
      color:var(--about-muted);
      font-size:clamp(1rem,2vw,1.14rem);
      line-height:1.75;
    }

    .about-hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      margin-top:2rem;
    }

    .about-button{
      display:inline-flex;
      min-height:3rem;
      align-items:center;
      justify-content:center;
      border:1px solid transparent;
      border-radius:999px;
      padding:.82rem 1.2rem;
      text-decoration:none;
      font:inherit;
      font-size:.92rem;
      font-weight:800;
      transition:.2s ease;
    }

    .about-button-primary{
      background:var(--about-accent);
      color:#071017;
    }

    .about-button-primary:hover{
      transform:translateY(-2px);
      background:var(--about-accent-soft);
    }

    .about-button-secondary{
      border-color:var(--about-border);
      background:transparent;
      color:var(--about-text);
    }

    .about-button-secondary:hover{
      border-color:var(--about-accent);
      color:var(--about-accent-soft);
    }

    .portrait-card{
      position:relative;
      min-height:540px;
      overflow:hidden;
      border:1px solid var(--about-border);
      border-radius:30px;
      background:var(--about-panel);
      box-shadow:0 30px 80px rgba(0,0,0,.28);
    }

    .portrait-card img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center 4%;
      display:block;
    }

    .portrait-card::after{
      content:"";
      position:absolute;
      inset:auto 0 0;
      height:38%;
      background:linear-gradient(to top,rgba(6,10,14,.82),transparent);
      pointer-events:none;
    }

    .portrait-label{
      position:absolute;
      left:1.25rem;
      right:1.25rem;
      bottom:1.2rem;
      z-index:2;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:1rem;
    }

    .portrait-label strong{
      display:block;
      font-size:1.08rem;
    }

    .portrait-label span{
      display:block;
      margin-top:.25rem;
      color:#c4d2dd;
      font-size:.86rem;
      line-height:1.4;
    }

    .portrait-badge{
      flex-shrink:0;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      padding:.5rem .75rem;
      background:rgba(10,16,22,.6);
      backdrop-filter:blur(8px);
      color:var(--about-accent-soft);
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .about-section{
      padding:5rem 1.5rem;
    }

    .about-section-border{
      border-top:1px solid var(--about-border);
    }

    .about-section-soft{
      background:rgba(255,255,255,.018);
    }

    .about-section-heading{
      max-width:760px;
      margin-bottom:2.2rem;
    }

    .about-section-title{
      display:block;
      width:100% !important;
      max-width:100% !important;
      margin:0;
      font-size:clamp(2rem,4vw,3.5rem);
      line-height:1.08;
      letter-spacing:-.04em;
      writing-mode:horizontal-tb !important;
      text-orientation:mixed !important;
      word-break:normal !important;
      overflow-wrap:normal !important;
      white-space:normal !important;
    }

    .about-section-copy{
      margin:1rem 0 0;
      color:var(--about-muted);
      font-size:1.02rem;
      line-height:1.75;
    }

    .story-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);
      gap:1.25rem;
      align-items:stretch;
    }

    .story-card,
    .quote-card{
      border:1px solid var(--about-border);
      border-radius:26px;
      padding:clamp(1.5rem,4vw,2.5rem);
      background:var(--about-panel);
    }

    .story-card p{
      margin:0;
      color:var(--about-muted);
      font-size:1rem;
      line-height:1.8;
    }

    .story-card p + p{
      margin-top:1rem;
    }

    .quote-card{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:
        radial-gradient(circle at 10% 10%,rgba(87,199,255,.16),transparent 42%),
        var(--about-panel);
      border-color:rgba(87,199,255,.28);
    }

    .quote-mark{
      color:var(--about-accent);
      font-size:4.5rem;
      font-family:Georgia,serif;
      line-height:.8;
    }

    .quote-card blockquote{
      margin:1.5rem 0;
      font-size:clamp(1.3rem,2.5vw,1.75rem);
      font-weight:700;
      line-height:1.45;
      letter-spacing:-.025em;
    }

    .quote-card small{
      color:var(--about-muted);
      font-size:.88rem;
    }

    .timeline{
      position:relative;
      display:grid;
      gap:1rem;
      max-width:930px;
      margin:0 auto;
    }

    .timeline::before{
      content:"";
      position:absolute;
      top:1rem;
      bottom:1rem;
      left:1.05rem;
      width:1px;
      background:linear-gradient(var(--about-accent),rgba(87,199,255,.15));
    }

    .timeline-item{
      position:relative;
      display:grid;
      grid-template-columns:2.1rem 1fr;
      gap:1rem;
      align-items:start;
    }

    .timeline-dot{
      position:relative;
      z-index:1;
      width:2.1rem;
      height:2.1rem;
      border:5px solid var(--about-bg);
      border-radius:50%;
      background:var(--about-accent);
      box-shadow:0 0 0 1px rgba(87,199,255,.42);
    }

    .timeline-content{
      border:1px solid var(--about-border);
      border-radius:18px;
      padding:1.15rem 1.25rem;
      background:var(--about-panel);
      transition:.2s ease;
    }

    .timeline-content:hover{
      transform:translateX(5px);
      border-color:rgba(87,199,255,.38);
      background:var(--about-panel-hover);
    }

    .timeline-content span{
      color:var(--about-accent);
      font-size:.73rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .timeline-content h3{
      margin:.35rem 0 .35rem;
      font-size:1.18rem;
    }

    .timeline-content p{
      margin:0;
      color:var(--about-muted);
      font-size:.92rem;
      line-height:1.6;
    }

    .qualification-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:1rem;
    }

    .qualification-card{
      border:1px solid var(--about-border);
      border-radius:22px;
      padding:1.4rem;
      background:var(--about-panel);
      transition:.22s ease;
    }

    .qualification-card:hover{
      transform:translateY(-5px);
      border-color:rgba(87,199,255,.4);
      background:var(--about-panel-hover);
    }

    .qualification-icon{
      display:grid;
      width:3rem;
      height:3rem;
      place-items:center;
      border:1px solid rgba(87,199,255,.26);
      border-radius:14px;
      background:rgba(87,199,255,.08);
      color:var(--about-accent-soft);
      font-size:1.05rem;
      font-weight:900;
    }

    .qualification-card h3{
      margin:1rem 0 .45rem;
      font-size:1.08rem;
      line-height:1.35;
    }

    .qualification-card p{
      margin:0;
      color:var(--about-muted);
      font-size:.9rem;
      line-height:1.55;
    }

    .stats-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }

    .stat-card{
      border:1px solid var(--about-border);
      border-radius:22px;
      padding:1.35rem;
      background:linear-gradient(145deg,rgba(87,199,255,.07),var(--about-panel) 48%);
    }

    .stat-value{
      display:block;
      color:var(--about-accent-soft);
      font-size:clamp(1.8rem,4vw,2.7rem);
      font-weight:800;
      line-height:1;
      letter-spacing:-.04em;
    }

    .stat-label{
      display:block;
      margin-top:.7rem;
      font-weight:700;
      line-height:1.4;
    }

    .stat-description{
      display:block;
      margin-top:.35rem;
      color:var(--about-muted);
      font-size:.86rem;
      line-height:1.5;
    }

    .philosophy-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }

    .philosophy-card{
      border:1px solid var(--about-border);
      border-radius:22px;
      padding:1.5rem;
      background:var(--about-panel);
    }

    .philosophy-number{
      color:var(--about-accent);
      font-size:.76rem;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .philosophy-card h3{
      margin:.7rem 0 .55rem;
      font-size:1.25rem;
    }

    .philosophy-card p{
      margin:0;
      color:var(--about-muted);
      font-size:.94rem;
      line-height:1.65;
    }

    .services-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }

    .service-card{
      position:relative;
      min-height:260px;
      overflow:hidden;
      border:1px solid var(--about-border);
      border-radius:24px;
      padding:1.5rem;
      background:var(--about-panel);
      text-decoration:none;
      color:var(--about-text);
      transition:.22s ease;
    }

    .service-card::before{
      content:"";
      position:absolute;
      width:12rem;
      height:12rem;
      right:-4rem;
      bottom:-5rem;
      border-radius:50%;
      background:rgba(87,199,255,.10);
      filter:blur(8px);
    }

    .service-card:hover{
      transform:translateY(-6px);
      border-color:rgba(87,199,255,.42);
      background:var(--about-panel-hover);
      box-shadow:0 24px 60px rgba(0,0,0,.22);
    }

    .service-card span{
      position:relative;
      color:var(--about-accent);
      font-size:.75rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .service-card h3{
      position:relative;
      margin:1rem 0 .65rem;
      font-size:1.55rem;
    }

    .service-card p{
      position:relative;
      margin:0;
      color:var(--about-muted);
      line-height:1.65;
    }

    .service-link{
      position:absolute;
      left:1.5rem;
      bottom:1.35rem;
      color:var(--about-accent-soft);
      font-size:.9rem;
      font-weight:800;
    }

    .cta-panel{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:2rem;
      border:1px solid rgba(87,199,255,.35);
      border-radius:28px;
      padding:clamp(1.5rem,4vw,2.6rem);
      background:linear-gradient(135deg,rgba(87,199,255,.14),rgba(18,25,35,.9));
    }

    .cta-panel h2{
      margin:0;
      font-size:clamp(1.8rem,4vw,3rem);
      letter-spacing:-.035em;
    }

    .cta-panel p{
      max-width:650px;
      margin:.8rem 0 0;
      color:var(--about-muted);
      line-height:1.7;
    }

    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      flex-shrink:0;
      gap:.7rem;
    }

    @media(max-width:1050px){
      .about-hero-grid,
      .story-grid{
        grid-template-columns:1fr;
      }

      .portrait-card{
        min-height:620px;
      }

      .qualification-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }

      .stats-grid,
      .philosophy-grid,
      .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }

    @media(max-width:680px){
      .about-hero{
        padding:7.5rem 1.1rem 3.5rem;
      }

      .about-section{
        padding:3.5rem 1.1rem;
      }

      .portrait-card{
        min-height:470px;
      }

      .about-hero-actions,
      .cta-actions{
        flex-direction:column;
      }

      .about-hero-actions .about-button,
      .cta-actions .about-button{
        width:100%;
      }

      .qualification-grid,
      .stats-grid,
      .philosophy-grid,
      .services-grid{
        grid-template-columns:1fr;
      }

      .cta-panel{
        align-items:stretch;
        flex-direction:column;
      }

      .portrait-label{
        align-items:flex-start;
        flex-direction:column;
      }
    }