/* NETSPIRES identity landing: two material languages meeting in one view.
   Resin reads round and fluid, steel reads square and rolled. Loaded on the home page only. */
body{overflow-x:hidden;overflow-x:clip}

/* Hero: full-bleed Midnight Navy field */
.new-surface .identity-hero{display:block;position:relative;isolation:isolate;margin:-1.5rem calc(50% - 50vw) 0;padding:0;border:0;background:#102a43;color:#f5f7f8;overflow:hidden}
.hero-inner{position:relative;max-width:78rem;margin:0 auto;padding:clamp(2.75rem,5vw,4.25rem) 1.5rem clamp(2.5rem,4vw,3.5rem)}
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.75rem 4.5rem;align-items:start}
.hero-copy h1{grid-column:1/-1}
.hero-support{grid-column:2}
.new-surface .identity-hero h1{margin:0;color:#f5f7f8;font-size:clamp(3rem,6.4vw,5.9rem);font-weight:400;line-height:.98;letter-spacing:-.035em}
.new-surface .identity-hero .identity-lead{margin:0 0 1rem;color:#dbe7ee;font-size:1.3rem;line-height:1.5}
.new-surface .identity-hero .identity-description{margin:0;color:#a3b9c8;font-size:1rem;line-height:1.65}
.identity-hero .hero-actions{margin-top:1.9rem;gap:1.6rem}
.identity-hero .solid-link{background:#8fd8d2;color:#102a43;padding:.85rem 1.25rem}
.identity-hero .solid-link:hover{background:#bdece8}
.identity-hero .hero-actions a:not(.solid-link){color:#f5f7f8;text-decoration-color:#8fd8d2}
.identity-hero a:focus-visible{outline-color:#e0a458}

/* Resin and steel face each other across a seam */
.new-surface .identity-hero .material-pair{display:grid;grid-template-columns:minmax(0,1fr) clamp(5rem,13vw,12rem) minmax(0,1fr);align-items:start;margin-top:clamp(2.75rem,5vw,4rem);padding:2.2rem 0 0;background:transparent;color:inherit;border-top:1px solid rgba(197,222,223,.2)}
.new-surface .identity-hero .material-pair section{padding:0;border:0}
.new-surface .identity-hero .material-pair h2{margin:0 0 .55rem;font-size:clamp(3rem,6.2vw,5.4rem);font-weight:400;line-height:1;letter-spacing:-.03em}
.material-resin h2{color:#8fd8d2!important}
.material-steel h2{color:#dfe6ec!important}
.material-steel{text-align:right}
.new-surface .identity-hero .material-pair section>p{margin:0 0 1.35rem;color:#c3d4de;font-size:1.05rem}
.new-surface .identity-hero .material-steel>p{margin-left:auto}
.grade-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.material-steel .grade-list{justify-content:flex-end}
.grade-list li{padding:.4rem .85rem;font-size:.86rem;font-weight:650;line-height:1.2}
.material-resin li{border:1px solid rgba(143,216,210,.55);border-radius:999px;color:#c6f0ec}
.material-steel li{border:1px solid rgba(223,230,236,.42);border-radius:0;background:rgba(223,230,236,.06);color:#e8edf1;letter-spacing:.06em}
.pair-seam{position:relative;align-self:stretch;min-height:6rem}
.pair-seam::before{content:"";position:absolute;left:50%;top:2.7rem;width:10px;height:10px;margin:-5px;border-radius:50%;background:#8fd8d2;box-shadow:0 0 0 7px rgba(143,216,210,.16)}
.has-flow .pair-seam::before{display:none}
.new-surface .identity-hero .material-pair .pair-caption{grid-column:1/-1;justify-self:center;max-width:none;margin:2.4rem 0 0;padding:0;border:0;color:#a3b9c8;font-size:.95rem;text-align:center}
.flow-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.flow-field.is-live{opacity:1}

/* Three parallel paths into the site */
.new-surface .purpose-section{display:block;padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);scroll-margin-top:1rem}
.new-surface .purpose-section>div:first-child{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.5rem 4.5rem;align-items:end;margin-bottom:2.75rem}
.new-surface .purpose-section h2{margin:0;font-size:clamp(2.2rem,3.8vw,3.2rem);line-height:1.08}
.new-surface .purpose-section>div:first-child>p{margin:0;max-width:38ch;color:#3e5668;font-size:1.1rem}
.new-surface .purpose-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid #102a43}
.new-surface .purpose-list article{display:flex;flex-direction:column;align-items:flex-start;padding:1.7rem 1.9rem 1.2rem;border:0;border-left:1px solid #c7cfd3}
.new-surface .purpose-list article:first-child{padding-left:0;padding-top:1.7rem;border-left:0}
.new-surface .purpose-list article:last-child{padding-right:0}
.new-surface .purpose-list h3{margin:0 0 .7rem;color:#102a43;font:400 1.6rem/1.2 Georgia,serif;letter-spacing:-.02em}
.new-surface .purpose-list p{margin:0 0 1.4rem;color:#50657a}
.new-surface .purpose-list a+a{margin:.55rem 0 0}

/* This week */
.new-surface .home-editorial{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:2rem 4.5rem;padding:clamp(2.75rem,5vw,4rem) 0;border-top:1px solid #c7cfd3;border-bottom:0}
.new-surface .home-editorial>div h2{margin:0 0 .6rem;font-size:clamp(2rem,3vw,2.6rem)}
.new-surface .home-editorial .landing-latest{padding:0;border:0}
.landing-latest .issue-date{margin:0;color:#0b6e75;font-weight:650}
.new-surface .home-editorial h3{margin:.55rem 0 1rem;font:400 clamp(1.85rem,3.1vw,2.6rem)/1.14 Georgia,serif;letter-spacing:-.025em}
.new-surface .home-editorial h3 a{color:#102a43}
.new-surface .home-editorial h3 a:hover{text-decoration:underline;text-decoration-thickness:1px}

/* Closing statement with the brand mark */
.new-surface .home-close{padding:clamp(3rem,6vw,5rem) 0 2rem;border-top:1px solid #c7cfd3}
.new-surface .home-close h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.ns-mark{display:block;width:3.25rem;height:3.25rem;margin:0 auto 1.2rem}
.ns-mark path{fill:none;stroke:#0b6e75;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:900px){
  .hero-copy{grid-template-columns:1fr;gap:1.75rem}
  .hero-support{grid-column:1}
  .new-surface .identity-hero h1{font-size:clamp(2.9rem,9vw,4.6rem)}
  .new-surface .purpose-section>div:first-child,.new-surface .home-editorial{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:760px){
  .new-surface .purpose-list{grid-template-columns:1fr;border-top:0}
  .new-surface .purpose-list article,.new-surface .purpose-list article:first-child,.new-surface .purpose-list article:last-child{padding:1.5rem 0 1.6rem;border-left:0;border-top:2px solid #102a43}
}
@media(max-width:640px){
  .new-surface .identity-hero{margin-top:-1.1rem}
  .hero-inner{padding:3rem 1.1rem 2.5rem}
  .new-surface .identity-hero h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .new-surface .identity-hero .identity-lead{font-size:1.15rem}
  .new-surface .identity-hero .material-pair{grid-template-columns:1fr;margin-top:3rem;padding-top:2rem}
  .material-steel{text-align:left}
  .material-steel .grade-list{justify-content:flex-start}
  .new-surface .identity-hero .material-steel>p{margin-left:0}
  .pair-seam{min-height:5.5rem}
  .pair-seam::before{top:50%}
  .new-surface .identity-hero .material-pair .pair-caption{justify-self:start;text-align:left;margin-top:2rem}
  .identity-hero .hero-actions{flex-direction:column;align-items:flex-start;gap:1.1rem}
}

/* One orchestrated entrance; everything stays visible without it. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @keyframes ns-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes ns-from-left{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
  @keyframes ns-from-right{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
  @keyframes ns-fade{from{opacity:0}to{opacity:1}}
  .identity-hero h1{animation:ns-rise 1s cubic-bezier(.2,.7,.2,1) both}
  .hero-support{animation:ns-rise 1s .18s cubic-bezier(.2,.7,.2,1) both}
  .material-resin{animation:ns-from-left 1.1s .45s cubic-bezier(.2,.7,.2,1) both}
  .material-steel{animation:ns-from-right 1.1s .45s cubic-bezier(.2,.7,.2,1) both}
  .identity-hero .pair-caption{animation:ns-fade .9s 1.5s both}
  .ns-motion .home-close .ns-mark path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s cubic-bezier(.6,0,.2,1)}
  .ns-motion .home-close.is-visible .ns-mark path{stroke-dashoffset:0}
  .ns-motion .home-close .ns-mark path:nth-child(2){transition-delay:.3s}
  .ns-motion .home-close .ns-mark path:nth-child(3){transition-delay:.7s}
  .ns-motion .home-close .ns-mark path:nth-child(4){transition-delay:1.05s}
}
@media print{
  .new-surface .identity-hero{margin:0;background:none;color:#102a43}
  .flow-field,.ns-mark{display:none}
  .new-surface .identity-hero h1,.new-surface .identity-hero .material-pair h2,.new-surface .identity-hero p,.grade-list li{color:#102a43!important}
}