/* Page-specific rules only. Shared styles: tn-base.css + tn-components.css */

/* thenet.ie — Our Work (page-specific). Shared: tn-base.css + tn-components.css */

.tn-section--tight{padding:84px 0;}

/* ============================================================ INTRO */
.tn-intro{background:var(--navy-900);}
.tn-intro__inner{max-width:880px;}
.tn-intro__inner p{font-size:20px; line-height:1.6; color:var(--t-mid); margin-top:18px;}
.tn-intro__inner strong{color:#fff; font-weight:600;}

/* ============================================================ CASE STUDIES GRID */
.tn-work{background:var(--navy-950);}
.tn-work__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:20px;}
.tn-wcard{display:flex; flex-direction:column; overflow:hidden; background:var(--surface-1); border:1px solid var(--hairline); border-radius:22px;
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);}
.tn-wcard:hover{transform:translateY(-5px); background:var(--surface-2); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);}
.tn-wcard__media{position:relative; height:200px; overflow:hidden; border-bottom:1px solid var(--hairline);}
.tn-wcard__media .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 14px,transparent 14px 28px),var(--navy-800);
  color:var(--t-low); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; line-height:1.6;}
.tn-wcard__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease);}
.tn-wcard:hover .tn-wcard__media img{transform:scale(1.04);}
.tn-wcard__media .scrim{position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(2,12,31,.55) 100%); pointer-events:none;}
.tn-wcard__tags{position:absolute; left:16px; bottom:14px; display:flex; gap:8px; flex-wrap:wrap; z-index:2;}
.tn-wcard__body{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1;}
.tn-wcard__body h3{font-weight:800; font-size:22px; letter-spacing:-.02em; color:#fff; margin-bottom:6px;}
.tn-wcard__body .url{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; color:var(--blue-soft); margin-bottom:11px; word-break:break-word;}
.tn-wcard__body p{font-size:15px; line-height:1.58; color:var(--t-mid); flex:1;}
.tn-wcard__more{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:var(--font-display);
  font-weight:700; font-size:14.5px; color:var(--gold-bright); transition:gap .2s var(--ease);}
.tn-wcard__more .tn-i{width:16px; height:16px; transition:transform .2s var(--ease);}
.tn-wcard:hover .tn-wcard__more .tn-i{transform:translateX(3px);}
.tn-work__note{display:flex; align-items:flex-start; gap:13px; margin-top:24px; padding:18px 22px;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:16px; max-width:880px;}
.tn-work__note .tn-i{width:20px; height:20px; color:var(--gold); flex-shrink:0; margin-top:1px;}
.tn-work__note p{font-size:15px; line-height:1.55; color:var(--t-mid);}

.tn-feat{background:var(--navy-950);}
.tn-platforms{background:var(--navy-900);}

/* ============================================================ WEB DESIGN PORTFOLIO GRID */
.tn-portfolio{background:var(--navy-950);}
.tn-pf__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px;}
.tn-pf{display:flex; flex-direction:column; overflow:hidden; background:var(--surface-1); border:1px solid var(--hairline); border-radius:16px;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);}
.tn-pf:hover{transform:translateY(-4px); background:var(--surface-2); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);}
.tn-pf__shot{position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--hairline);}
.tn-pf__shot .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px),var(--navy-800);
  color:var(--t-low); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; line-height:1.6;}
.tn-pf__shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .45s var(--ease);}
.tn-pf:hover .tn-pf__shot img{transform:scale(1.05);}
.tn-pf__ext{position:absolute; top:11px; right:11px; z-index:2; width:30px; height:30px; border-radius:9px;
  background:rgba(2,12,31,.6); border:1px solid var(--hairline-2); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);}
.tn-pf__ext .tn-i{width:15px; height:15px; color:#fff;}
.tn-pf__meta{padding:16px 18px 18px;}
.tn-pf__name{display:flex; flex-direction:column-reverse; align-items:flex-start; gap:5px;}
.tn-pf__name b{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; color:#fff; line-height:1.2;}
.tn-pf__tag{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); white-space:nowrap;}
.tn-pf__url{font-family:var(--font-mono); font-size:11px; color:var(--t-low); margin-top:6px; word-break:break-word;}

/* ============================================================ PRINT GALLERY (masonry) */
.tn-print{background:var(--navy-900);}
.tn-print__masonry{column-count:4; column-gap:14px;}
.tn-pt{position:relative; display:block; break-inside:avoid; margin:0 0 14px; overflow:hidden; border-radius:14px;
  border:1px solid var(--hairline); background:var(--navy-850); transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);}
.tn-pt:hover{transform:translateY(-4px); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);}
.tn-pt img{width:100%; display:block;}
.tn-pt__cap{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; padding:30px 14px 14px;
  background:linear-gradient(180deg,transparent,rgba(2,12,31,.82)); pointer-events:none;}
.tn-pt__cap span{font-family:var(--font-display); font-weight:700; font-size:13.5px; line-height:1.3; color:#fff; letter-spacing:-.01em;}
.tn-pt__badge{position:absolute; top:11px; left:11px; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--t-low); background:rgba(2,12,31,.5); border:1px solid var(--hairline); border-radius:999px; padding:3px 9px;}

/* ============================================================ BY THE NUMBERS (stats band) */
.tn-stats-sec{background:var(--navy-900); padding:0;}
.tn-stats-band{position:relative; overflow:hidden; border-radius:28px; background:var(--grad-band);
  border:1px solid var(--hairline-2); padding:54px 48px; box-shadow:var(--shadow-deep); margin:104px 0;}
.tn-stats-band__glow{position:absolute; right:-120px; top:-120px; width:460px; height:460px; filter:blur(14px);
  background:radial-gradient(circle,rgba(255,201,33,.16),transparent 62%); pointer-events:none;}
.tn-stats-band .tn-eyebrow{color:var(--gold);}
.tn-stats-band h2{position:relative; font-weight:800; font-size:clamp(1.8rem,2.8vw,2.4rem); line-height:1.1; letter-spacing:-.025em; margin:16px 0 36px; max-width:680px;}
.tn-stats-grid{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.tn-stat{padding:4px 2px;}
.tn-stat .v{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.6vw,46px); line-height:1; color:#fff; letter-spacing:-.03em;}
.tn-stat .v .u{color:var(--gold); font-size:.62em; margin-left:1px;}
.tn-stat .l{font-size:14px; line-height:1.45; color:var(--blue-soft); margin-top:12px;}
.tn-stats-grid .tn-stat + .tn-stat{border-left:1px solid var(--hairline-2); padding-left:22px;}

/* ============================================================ SERVICES BEHIND (link band) */
.tn-behind{background:var(--navy-950);}
.tn-behind__inner{max-width:880px;}
.tn-behind__inner p{font-size:19px; line-height:1.62; color:var(--t-mid); margin-top:18px;}
.tn-behind__inner a{color:var(--gold-bright); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;}
.tn-behind__inner a:hover{color:var(--gold);}

/* ============================================================ RESPONSIVE */
@media (max-width:900px){
  .tn-stats-grid{grid-template-columns:1fr 1fr; gap:28px 18px;}
  .tn-stats-grid .tn-stat:nth-child(odd){border-left:none; padding-left:2px;}
  .tn-print__masonry{column-count:3;}
}
@media (max-width:560px){
  .tn-section--tight{padding:60px 0;}
  .tn-intro__inner p{font-size:18px;}
  .tn-print__masonry{column-count:2;}
  .tn-stats-grid{grid-template-columns:1fr;}
  .tn-stats-grid .tn-stat + .tn-stat{border-left:none; padding-left:2px;}
  .tn-stats-band{padding:40px 28px; margin:72px 0;}
}