/* ---------- global ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px);box-sizing:border-box}

/* ---------- header ---------- */
.pc-hero-wrap{background:linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary) 50%, var(--color-secondary) 122%);background-image:radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px),linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary) 50%, var(--color-secondary) 122%);background-size:20px 20px,100% 100%;position:relative}

header{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px clamp(20px,4vw,48px);width:100%;box-sizing:border-box;height:84px}

.pc-logo-symbol{display:none}
.pc-desktop-nav{display:flex}
.pc-nav-links{flex-wrap:wrap;justify-content:center;gap:32px;font-family:var(--font-body);font-size:16px;font-weight:500}
.pc-nav-links a{color:var(--color-white)}
.pc-header-cta{justify-content:flex-end}

.pc-mobile-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-base);border:none;background:transparent;cursor:pointer;padding:0;position:relative}
.pc-mobile-toggle .material-symbols-rounded{font-size:30px;color:var(--color-white)}

.pc-mobile-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--color-black);box-sizing:border-box;padding:16px clamp(20px,4vw,48px) 40px;display:flex;flex-direction:column;opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity 0.4s var(--ease-standard),transform 0.4s var(--ease-standard);z-index:45;overflow-y:auto}
.pc-mobile-menu.pc-open{opacity:1;transform:translateY(0);pointer-events:auto}
.pc-mobile-menu-top{display:flex;align-items:center;justify-content:space-between;height:52px}
.pc-mobile-close{width:44px;height:44px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pc-mobile-close .material-symbols-rounded{font-size:32px;color:var(--color-white)}
.pc-mobile-nav{display:flex;flex-direction:column;margin-top:56px;padding-right:6px}
.pc-mobile-link{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-body);font-weight:700;font-size:32px;color:var(--color-white);text-decoration:none;padding:16px 0}
.pc-mobile-link:hover{color:#FFD9A0;text-decoration:none}
.pc-mobile-link .material-symbols-rounded{font-size:24px;color:var(--color-white)}
.pc-mobile-cta-wrap{margin-top:32px}
.pc-mobile-cta-wrap button,.pc-mobile-cta-wrap .pc-btn{width:100%}

/* ---------- hero ---------- */
.pc-hero{min-height:75vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.pc-hero-inner{max-width:var(--container-max);margin:0 auto;padding:clamp(24px,5vw,48px) clamp(20px,4vw,48px) 80px;width:100%;box-sizing:border-box;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.pc-hero-title{font-family:var(--font-display);font-weight:700;font-size:clamp(48px,10vw,95px);line-height:1.15;color:var(--color-white);margin:0 0 32px}
.pc-hero-line{display:inline}
.pc-hero-word{color:#FFD9A0;font-weight:700;display:inline-block;will-change:opacity, transform;transition:opacity 0.4s cubic-bezier(0.25,0.1,0.25,1), transform 0.4s cubic-bezier(0.25,0.1,0.25,1)}
.pc-hero-word.pc-fade-out{opacity:0;transform:translateY(18px)}
.pc-hero-desc{font-family:var(--font-body);font-size:var(--text-body-lg-size);line-height:1.6;color:var(--color-white);max-width:700px;margin:0 0 40px}
.pc-hero-buttons{display:flex;flex-wrap:wrap;gap:16px;width:100%}
.pc-hero-outline-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:16px 20px;font-family:var(--font-body);font-weight:var(--text-button-weight);font-size:16px;line-height:1;color:var(--color-white);text-decoration:none;border:1.5px solid var(--color-white);border-radius:var(--radius-signature);background:transparent;transition:transform .1s var(--ease-standard)}
.pc-hero-outline-btn:active{transform:scale(0.97)}
.pc-hero-outline-sweep{position:absolute;inset:0;z-index:0;background:rgba(255,255,255,0.18);transform:translateX(-130%) skewX(-12deg);transform-origin:left;transition:transform .35s var(--ease-standard)}
.pc-hero-outline-btn:hover .pc-hero-outline-sweep{transform:translateX(0%) skewX(-12deg)}
.pc-hero-outline-label{position:relative;z-index:1}

/* ---------- work gallery ---------- */
#work{padding:32px 0;background:var(--color-white);overflow:hidden}
.pc-work-desktop{overflow:hidden;width:100%}
.pc-work-track{display:flex;width:max-content;gap:16px;padding-right:16px}
.pc-work-track.pc-scroll-l{animation:pc-scroll-l 48s linear infinite}
.pc-work-item{flex-shrink:0;height:320px;border-radius:var(--radius-base);overflow:hidden;box-shadow:var(--shadow-sm)}
.pc-work-item img{height:100%;width:auto;display:block}
@keyframes pc-scroll-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.pc-work-mobile{display:none}
.pc-work-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 24px 8px}
.pc-work-scroll::-webkit-scrollbar{display:none}
.pc-work-scroll-item{flex:0 0 78%;scroll-snap-align:center;border-radius:var(--radius-base);overflow:hidden;box-shadow:var(--shadow-sm)}
.pc-work-scroll-item img{width:100%;height:auto;display:block}
.pc-work-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.pc-work-dot{width:8px;height:8px;border-radius:50%;background:var(--color-gray-border);cursor:pointer;transition:background-color 0.3s var(--ease-standard);border:none;padding:0}
.pc-work-dot.pc-active{background:var(--color-primary)}

/* ---------- story ---------- */
#story{max-width:var(--container-max);margin:0 auto;padding:clamp(100px,16vw,160px) clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.pc-eyebrow{font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-secondary);margin-bottom:16px}
#story-text{grid-column:1 / span 8}
#story-highlight{max-width:900px}
#story-symbol-col{grid-column:9 / span 4;display:flex;justify-content:center}
#story-symbol-wrap{width:100%;max-width:320px}
#story-symbol{height:auto;width:100%;max-width:320px;aspect-ratio:225/230;-webkit-mask:url('../assets/pentacode-symbol.svg') center/contain no-repeat;mask:url('../assets/pentacode-symbol.svg') center/contain no-repeat;background:var(--color-primary);transition:background-color 0.5s var(--ease-standard), transform 0.5s var(--ease-standard)}
#story-symbol:hover{background:var(--color-secondary);transform:rotate(8deg) scale(1.05)}
@media (hover: none), (hover: hover) and (pointer: coarse){
  #story-symbol:hover{background:var(--color-primary);transform:none}
  #story-symbol.pc-in-view{background:var(--color-secondary);transform:rotate(8deg) scale(1.05)}
}

/* ---------- approach ---------- */
#approach{background:var(--color-primary-bg)}
#approach .pc-section-inner{max-width:var(--container-max);margin:0 auto;padding:clamp(56px,10vw,96px) clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.pc-approach-heading{grid-column:1 / span 6}
.pc-approach-heading h2{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,6vw,54px);color:var(--color-black);margin:0 0 16px}
.pc-approach-heading p{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text-muted);margin:0}
.pc-pillars{display:flex;flex-direction:column;gap:16px;grid-column:7 / span 6}
.pc-pillar{background:var(--color-white);border-radius:var(--radius-signature-lg);padding:24px 28px;display:grid;grid-template-columns:56px 1fr;gap:24px;align-items:center}
.pc-pillar-n{font-family:'Gravitas One',serif;font-size:62px;color:var(--color-primary);line-height:1.15;text-align:center;width:56px}
.pc-pillar-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--color-black);margin-bottom:6px}
.pc-pillar-desc{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--text-muted)}

/* ---------- capabilities ---------- */
#capabilities{max-width:var(--container-max);margin:0 auto;padding:clamp(56px,10vw,96px) clamp(20px,4vw,48px)}
#capabilities-heading{text-align:center;max-width:50%;margin:0 auto 56px}
#capabilities-heading h2{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,6vw,54px);color:var(--color-black);margin:0 0 16px}
#capabilities-heading p{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text-muted);margin:0}
#capabilities-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.pc-capability-wrap{flex:0 1 calc((100% - 48px)/3);min-width:280px;display:flex}
.capability-card{background:var(--surface-tint-primary);border-radius:var(--radius-signature-lg);padding:28px;height:100%;box-sizing:border-box;width:100%}
.pc-capability-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background-color:var(--color-primary)}
.pc-capability-icon .material-symbols-rounded{font-size:28px;color:var(--color-white)}
.pc-capability-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--color-black);margin-bottom:8px}
.pc-capability-desc{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--text-muted)}

/* ---------- tech marquee ---------- */
#tech-marquee{padding:24px 0;border-top:1px solid rgba(30,30,30,0.1);border-bottom:1px solid rgba(30,30,30,0.1);overflow:hidden;background-color:var(--surface-page)}
.pc-marquee{overflow:hidden;width:100%}
.pc-marquee-track{display:flex;width:max-content;animation:pc-marquee-left var(--speed,55s) linear infinite}
.pc-marquee-track:hover{animation-play-state:paused}
.pc-marquee-group{display:flex;gap:40px;align-items:center;flex-shrink:0;padding-right:40px}
.pc-marquee-item{font-family:var(--font-display);font-size:15px;letter-spacing:0.4px;color:var(--color-black);white-space:nowrap}
.pc-marquee-item:nth-child(2n){color:var(--color-secondary)}
@keyframes pc-marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- contact ---------- */
.pc-contact-wrap{background:var(--color-black)}
#contact{background:var(--color-secondary);background-image:radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px);background-size:20px 20px;border-radius:0 0 80px 0}
#contact .pc-section-inner{max-width:var(--container-max);margin:0 auto;padding:clamp(56px,10vw,96px) clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.pc-contact-heading{grid-column:1 / span 6}
.pc-contact-heading .pc-eyebrow{color:var(--color-white)}
.pc-contact-heading h2{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,6vw,54px);color:var(--color-white);margin:0 0 16px}
.pc-contact-heading p{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--color-white);margin:0}
.pc-contact-form-col{grid-column:7 / span 6}
.pc-contact-card{background:var(--color-white);border-radius:4px 4px 24px 4px;padding:clamp(20px,4vw,32px);box-shadow:var(--shadow-lg)}
.pc-form{display:flex;flex-direction:column;gap:20px}
.pc-form-row{display:flex;flex-wrap:wrap;gap:16px}
.pc-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body);width:100%}
.pc-form-row .pc-field{flex:1 1 200px}
.pc-field label{font-size:14px;font-weight:500;color:var(--text-body)}
.pc-field input,.pc-field select,.pc-field textarea{font-family:var(--font-body);font-size:16px;padding:10px 12px;border-radius:var(--radius-base);border:1.5px solid var(--border-default);color:var(--text-body);outline:3px solid transparent;transition:border-color 0.2s var(--ease-standard), outline-color 0.2s var(--ease-standard)}
.pc-field input:hover,.pc-field select:hover,.pc-field textarea:hover{border-color:var(--color-gray)}
.pc-field input:focus,.pc-field select:focus,.pc-field textarea:focus{border-color:var(--border-focus);outline:3px solid rgba(32,95,175,0.15)}
.pc-field textarea{resize:vertical}
.pc-field select{appearance:none;-webkit-appearance:none;background-color:var(--color-white);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.pc-send-btn-wrap button{width:auto}

/* ---------- footer ---------- */
footer{background:var(--color-black)}
.pc-footer-inner{max-width:var(--container-max);margin:0 auto;padding:64px clamp(20px,4vw,48px) 24px}
#footer-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,0.2)}
.footer-col{grid-column:span 4}
.footer-spacer{grid-column:span 2}
.pc-footer-logo{height:auto;width:clamp(220px,45vw,321px);max-width:100%;margin-bottom:16px;opacity:0.75}
.pc-footer-desc{font-family:var(--font-body);font-size:14px;line-height:1.6;color:rgba(255,255,255,0.75);margin:0;width:100%}
.pc-footer-heading{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-bottom:16px}
.pc-footer-links{display:flex;flex-direction:column;gap:10px;font-family:var(--font-body);font-size:15px}
.pc-footer-links a{color:var(--color-white)}
.pc-footer-contact{display:flex;flex-direction:column;gap:10px;font-family:var(--font-body);font-size:15px;color:var(--color-white)}
.pc-footer-contact-row{display:flex;align-items:center;gap:8px}
.pc-footer-contact-row .material-symbols-rounded{font-size:18px;color:rgba(255,255,255,0.75)}
#footer-bottom{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-top:24px;padding-bottom:32px;font-family:var(--font-body);font-size:13px;color:rgba(255,255,255,0.75)}
#footer-bottom span{grid-column:span 6}
#footer-tagline{text-align:right}

/* ---------- responsive ---------- */
@media (max-width: 839px){
  .pc-desktop-nav{display:none !important}
  .pc-mobile-toggle{display:flex !important}
  .pc-logo-full{display:none !important}
  .pc-logo-symbol{display:block !important}
  header{display:flex !important;justify-content:space-between !important}
  .pc-hero-buttons{flex-direction:column}
  .pc-hero-buttons .pc-btn,.pc-hero-buttons .pc-hero-outline-btn{width:100%}
  .pc-send-btn-wrap button{width:100% !important}
  #capabilities-heading{max-width:100% !important}
}

@media (min-width: 600px) and (max-width: 839px){
  #capabilities-grid > .pc-capability-wrap{flex-basis:calc((100% - 24px)/2) !important}
}

@media (max-width: 599px){
  .pc-hero-line{display:flex !important;flex-direction:column !important}
  .pc-hero-line .pc-hero-word-wrap{margin-top:8px}
  .pc-hero-desc{font-size:16px !important}

  #pc-grid-overlay{display:none !important}

  #story-highlight{font-size:26px}
  .pc-highlight{font-size:26px !important}
  #story-text{grid-column:1 / span 12 !important;order:1}
  #story-symbol-col{grid-column:1 / span 12 !important;order:2;justify-content:center !important;margin-top:32px}
  #story-symbol-wrap{margin:0 auto !important}
  #story-symbol{max-width:160px !important;margin:0 auto !important}

  .col-half{grid-column:1 / span 12 !important}
  #capabilities-grid{flex-direction:column !important}
  .pc-capability-wrap{flex-basis:auto !important;width:100% !important}
  #capabilities-heading{text-align:left !important;margin:0 0 40px !important}

  #footer-grid{row-gap:32px !important}
  #footer-grid .footer-col{grid-column:1 / span 12 !important}
  #footer-grid .footer-spacer{display:none !important}
  #footer-bottom{row-gap:8px !important;grid-template-columns:1fr !important}
  #footer-bottom span{grid-column:1 / -1 !important;text-align:left !important}
  #footer-tagline{grid-column:1 / -1 !important;text-align:left !important}

  .pc-work-desktop{display:none !important}
  .pc-work-mobile{display:block !important}
}

@media (pointer: coarse) and (max-width: 599px){
  .pc-work-desktop{display:none !important}
  .pc-work-mobile{display:block !important}
}