/* Web Design page-specific. Shared: tn-base.css + tn-components.css */

/* hero — design-specific motif position */
.tn-svc-hero__motif{
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 30% 12%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 75% at 30% 12%,#000,transparent 72%);}
.tn-svc-hero__glow{top:-120px; right:-60px; left:auto;}
.tn-svc-hero h1{font-size:clamp(2.5rem,4.6vw,4.1rem); line-height:1.04;}
.tn-svc-hero__lead{font-size:19px; max-width:520px;}

/* scroll reveal (JS-driven via web-design.js) */
.tn-reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease);}
.tn-reveal.tn-in{opacity:1; transform:none;}

/* hero showcase card */
.tn-shot{position:relative;}
.tn-shot__card{background:linear-gradient(180deg,var(--navy-850),var(--navy-870)); border-radius:28px;
  box-shadow:var(--shadow-deep); border:1px solid var(--hairline-2); padding:18px;}
.tn-shot__bar{display:flex; align-items:center; gap:7px; margin-bottom:14px; padding-left:4px;}
.tn-shot__bar i{width:11px; height:11px; border-radius:50%; display:block;}
.tn-shot__bar .r{background:#ff5f57;} .tn-shot__bar .y{background:#febc2e;} .tn-shot__bar .g{background:#28c840;}
.tn-shot__bar span{margin-left:10px; font-family:var(--font-mono); font-size:11.5px; color:var(--t-low);}
.tn-shot__img{width:100%; height:340px; object-fit:cover; border-radius:14px; display:block;}
.tn-shot__swatches{display:flex; gap:9px; margin-top:14px;}
.tn-shot__swatches i{flex:1; height:8px; border-radius:999px; display:block;}
.tn-shot__badge{position:absolute; bottom:-20px; left:-22px; background:var(--grad-gold); color:var(--navy-900);
  border-radius:14px; padding:12px 16px; box-shadow:var(--shadow-gold); display:flex; align-items:center; gap:10px; white-space:nowrap;}
.tn-shot__badge .tn-i{width:19px; height:19px;}
.tn-shot__badge span{font-family:var(--font-display); font-weight:800; font-size:14px;}

/* ============================================================ DISCIPLINES */
.tn-breadth{background:var(--navy-900);}
.tn-grid-disc{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;}
.tn-disc{background:var(--surface-1); border:1px solid var(--hairline); border-radius:20px; padding:26px 24px;
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);}
.tn-disc:hover{transform:translateY(-4px); background:var(--surface-2); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);}
.tn-disc__icon{width:50px; height:50px; border-radius:14px; background:rgba(39,148,252,.12); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.tn-disc__icon .tn-i{color:var(--blue-bright);}
.tn-disc h3{font-weight:700; font-size:20px; letter-spacing:-.02em; margin-bottom:9px;}
.tn-disc p{font-size:15px; line-height:1.58; color:var(--t-mid);}

/* ============================================================ EDGE */
.tn-edge{position:relative; background:var(--navy-950); overflow:hidden;}
.tn-edge__glow{position:absolute; right:-160px; top:-120px; width:520px; height:520px; filter:blur(12px);
  background:radial-gradient(circle,rgba(255,201,33,.12),transparent 64%);}
.tn-edge__inner{position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;}
.tn-edge h2{font-weight:800; font-size:clamp(2.1rem,3.6vw,3.2rem); line-height:1.07; letter-spacing:-.03em; margin:18px 0 22px;}
.tn-edge h2 .tn-hl{color:var(--gold);}
.tn-edge__lead{font-size:18px; line-height:1.62; color:var(--t-mid); max-width:440px;}
.tn-edge__cards{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.tn-ec{padding:24px 22px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:20px;}
.tn-ec__icon{width:46px; height:46px; border-radius:14px; background:var(--grad-blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.tn-ec__icon .tn-i{color:#fff;}
.tn-ec h3{font-weight:700; font-size:18px; letter-spacing:-.02em; margin-bottom:8px;}
.tn-ec p{font-size:14.5px; line-height:1.55; color:var(--t-mid);}

/* ============================================================ GALLERY */
.tn-gallery{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));}
.tn-gal-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:220px; gap:16px;}
.tn-gt{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--hairline); background:var(--navy-850);
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);}
.tn-gt:hover{transform:translateY(-4px); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);}
.tn-gt--feat{grid-column:span 2; grid-row:span 2;}
.tn-gt__img{width:100%; height:100%; object-fit:cover; display:block;}
.tn-gt__scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(3,21,48,.82) 100%);}
.tn-gt__badge{position:absolute; left:18px; bottom:16px;}
.tn-gt--cta{border:1px dashed var(--hairline-2); background:var(--surface-1); display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; padding:26px;}
.tn-gt--cta .tn-i{width:26px; height:26px; color:var(--gold);}
.tn-gt--cta h3{font-weight:800; font-size:19px; letter-spacing:-.02em; margin:14px 0 6px;}
.tn-gt--cta p{font-size:14.5px; color:var(--t-mid); margin-bottom:16px; line-height:1.5;}

/* ============================================================ RESPONSIVE */
@media (max-width:940px){  .tn-shot{max-width:520px;} }
@media (max-width:900px){
  .tn-edge__inner{grid-template-columns:1fr; gap:40px;}
  .tn-grid-proc{grid-template-columns:1fr 1fr;}
  .tn-step__arrow{display:none;}
  .tn-revgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .tn-gal-grid{grid-template-columns:1fr 1fr;}
  .tn-gt--feat{grid-column:span 1; grid-row:span 1;}
}
@media (max-width:560px){
  .tn-section{padding:72px 0;}
  .tn-edge__cards{grid-template-columns:1fr;}
  .tn-grid-proc{grid-template-columns:1fr;}
  .tn-gal-grid{grid-template-columns:1fr;}
  .tn-revgrid{grid-template-columns:1fr;}
  .tn-cta__grid{grid-template-columns:1fr; gap:32px;}
  .tn-cta__inner{padding:40px 28px;}
}

/* ============================================================
   Host-theme integration (Web Design) — mirrors the homepage
   dark-page treatment, scoped to body.page-template-web-design.
   Brand fonts come from the site-wide fonts.css.
   ============================================================ */
.page-template-web-design #page.grid-container{max-width:100%;padding-left:0;padding-right:0;}
.page-template-web-design .site-content{padding:0;}
.page-template-web-design main.tn-page{width:100%;margin-left:auto;margin-right:auto;}
body.page-template-web-design{background-color:#031530;}
.page-template-web-design .site-header{background-color:transparent;position:fixed;top:0;left:0;right:0;z-index:20;
  transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;}
.page-template-web-design.tn-scrolled .site-header{background-color:rgba(3,21,48,.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.10), 0 18px 40px rgba(0,0,0,.28);}
.page-template-web-design .main-navigation{background-color:transparent;}
.page-template-web-design .main-navigation ul ul{background-color:#051a3a;}
.page-template-web-design .main-title a,
.page-template-web-design .main-navigation .main-nav ul li a,
.page-template-web-design .main-navigation .menu-toggle,
.page-template-web-design .main-navigation .menu-bar-items{color:#ffffff;}
.page-template-web-design .main-navigation .main-nav ul li:hover > a,
.page-template-web-design .main-navigation .main-nav ul li.sfHover > a,
.page-template-web-design .main-navigation .main-nav ul li[class*="current-menu-"] > a{color:#ffc921;}
@media (max-width:768px){ .page-template-web-design .main-navigation .main-nav > ul{background-color:#051a3a;} }
.page-template-web-design .tn-header-phone{color:#ffffff;}
.page-template-web-design .tn-header-phone:hover{color:#ffc921;}