/* ============================================================
   thenet.ie — shared page components for inner pages.
   Loaded after tn-base.css. Page files should contain only
   unique section styles (hero visuals, forms, case grids, etc.).
   ============================================================ */

/* ============================================================ HERO SHELL */
.tn-svc-hero{position:relative; background:var(--grad-hero); overflow:hidden; padding-top:84px;}
.tn-svc-hero__motif{position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 70% 12%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 75% at 70% 12%,#000,transparent 72%);}
.tn-svc-hero__glow{position:absolute; top:-120px; left:-60px; width:560px; height:560px; pointer-events:none;
  filter:blur(20px); background:radial-gradient(circle,rgba(39,148,252,.30),transparent 62%);}
.tn-svc-hero__inner{position:relative; display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center; padding:60px 0 92px;}
.tn-page-hero__inner{position:relative; padding:64px 0 92px;}
.tn-case-hero__inner{position:relative; padding:54px 0 0;}

/* breadcrumb */
.tn-crumb{display:flex; align-items:center; gap:11px; margin-bottom:22px; flex-wrap:wrap;}
.tn-crumb a,.tn-crumb span{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
.tn-crumb a{color:var(--t-low);}
.tn-crumb .sep{color:var(--t-low); width:14px; height:14px;}
.tn-crumb .cur{color:var(--gold);}

/* service hero typography (two-column layout) */
.tn-svc-hero h1{font-weight:800; font-size:clamp(2.4rem,4.2vw,3.9rem); line-height:1.05; letter-spacing:-.03em; margin-bottom:24px; text-wrap:balance;}
.tn-svc-hero h1 .tn-hl{color:var(--gold);}
.tn-svc-hero__lead{font-size:18.5px; line-height:1.62; color:var(--t-mid); margin-bottom:34px; max-width:540px;}
.tn-svc-hero__cta{display:flex; align-items:center; gap:14px; margin-bottom:36px; flex-wrap:wrap;}

/* page hero typography (single-column inside .tn-container, e.g. Our Work, Contact) */
.tn-page-hero__inner h1{font-weight:800; font-size:clamp(2.4rem,4.4vw,4rem); line-height:1.04; letter-spacing:-.03em; margin-bottom:24px; text-wrap:balance; max-width:840px;}
.tn-page-hero__inner h1 .tn-hl{color:var(--gold);}
.tn-page-hero__lead{font-size:19px; line-height:1.62; color:var(--t-mid); margin-bottom:34px; max-width:800px;}
.tn-page-hero__cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:40px;}
.tn-pillars{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.tn-pillar{display:flex; align-items:center; gap:9px;}
.tn-pillar .tn-i{width:18px; height:18px; color:var(--gold);}
.tn-pillar span{font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--t-mid);}

/* case-study hero typography */
.tn-case-hero__tags{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.tn-case-hero h1{font-weight:800; font-size:clamp(2.4rem,4.4vw,4rem); line-height:1.05; letter-spacing:-.03em; max-width:920px; text-wrap:balance;}
.tn-case-hero h1 .tn-hl{color:var(--gold);}
.tn-case-hero__lead{font-size:19px; line-height:1.62; color:var(--t-mid); margin-top:24px; max-width:760px;}
.tn-case-hero__cta{display:flex; align-items:center; gap:14px; margin-top:34px; flex-wrap:wrap;}

/* ============================================================ PROCESS */
.tn-grid-proc{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.tn-step{position:relative; padding:28px 24px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:20px;}
.tn-step__n{font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.1em; color:var(--gold); margin-bottom:22px;}
.tn-step__icon{width:50px; height:50px; border-radius:14px; background:var(--surface-2); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.tn-step__icon .tn-i{width:22px; height:22px; color:var(--blue-bright);}
.tn-step h3{font-weight:700; font-size:19px; letter-spacing:-.02em; margin-bottom:9px;}
.tn-step p{font-size:14.5px; line-height:1.56; color:var(--t-mid);}
.tn-step__arrow{position:absolute; right:-12px; top:50%; z-index:2; width:24px; height:24px; border-radius:50%;
  background:var(--navy-800); border:1px solid var(--hairline-2); display:flex; align-items:center; justify-content:center;}
.tn-step__arrow .tn-i{width:14px; height:14px; color:var(--gold);}
.tn-step:last-child .tn-step__arrow{display:none;}

/* ============================================================ FORM (Contact, Online Presence Audit, etc.) */
.tn-form-sec{background:var(--navy-950);}
.tn-form-sec__grid{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:start;}
.tn-formcard{background:linear-gradient(180deg,var(--navy-850),var(--navy-870)); border:1px solid var(--hairline-2);
  border-radius:24px; padding:38px 36px; box-shadow:var(--shadow-deep);}
.tn-form{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.tn-field{display:flex; flex-direction:column; gap:8px;}
.tn-field--full{grid-column:1 / -1;}
.tn-field label{font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff;}
.tn-field label .req{color:var(--gold);}
.tn-field input,.tn-field textarea{font-family:var(--font-body); font-size:15.5px; color:#fff; background:var(--surface-1);
  border:1px solid var(--hairline-2); border-radius:12px; padding:14px 16px; transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease); width:100%;}
.tn-field input::placeholder,.tn-field textarea::placeholder{color:var(--t-low);}
.tn-field input:focus,.tn-field textarea:focus{outline:none; border-color:var(--blue-bright); background:var(--surface-2); box-shadow:0 0 0 3px rgba(39,148,252,.22);}
.tn-field textarea{resize:vertical; min-height:96px;}
.tn-consent{grid-column:1 / -1; display:flex; gap:12px; align-items:flex-start; margin-top:2px;}
.tn-consent input{appearance:none; -webkit-appearance:none; width:22px; height:22px; flex-shrink:0; margin-top:1px;
  border:1.5px solid var(--hairline-2); border-radius:6px; background:var(--surface-1); cursor:pointer; position:relative; transition:all .18s var(--ease);}
.tn-consent input:checked{background:var(--grad-gold); border-color:transparent;}
.tn-consent input:checked::after{content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid var(--navy-900); border-width:0 2.5px 2.5px 0; transform:rotate(45deg);}
.tn-consent input:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(39,148,252,.22);}
.tn-consent label{font-family:var(--font-body); font-size:13.5px; line-height:1.5; color:var(--t-mid); font-weight:400;}
.tn-consent a{color:var(--gold-bright); text-decoration:underline; text-underline-offset:2px;}
.tn-form__submit{grid-column:1 / -1; margin-top:4px;}
.tn-form__note{grid-column:1 / -1; display:flex; align-items:flex-start; gap:9px; margin-top:8px; font-size:13.5px; line-height:1.5; color:var(--t-mid);}
.tn-form__note .tn-i{width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:2px;}
.tn-form__note a{color:var(--gold-bright); font-weight:600;}
.tn-form__ok{display:none; flex-direction:column; align-items:center; text-align:center; padding:24px 10px;}
.tn-form__ok .ring{width:64px; height:64px; border-radius:50%; background:rgba(54,211,153,.16); border:1px solid rgba(54,211,153,.34);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.tn-form__ok .ring .tn-i{width:30px; height:30px; color:var(--green);}
.tn-form__ok h3{font-weight:800; font-size:23px; letter-spacing:-.02em; margin-bottom:10px;}
.tn-form__ok p{font-size:15.5px; line-height:1.6; color:var(--t-mid); max-width:400px;}
.tn-formcard.is-sent .tn-form{display:none;}
.tn-formcard.is-sent .tn-form__ok{display:flex;}
.tn-aside{display:flex; flex-direction:column; gap:14px;}
.tn-aside__card{padding:26px 26px; border-radius:20px; border:1px solid var(--hairline); background:var(--surface-1);}
.tn-aside__card h3{font-weight:800; font-size:18px; letter-spacing:-.02em; margin-bottom:16px;}
.tn-aside__row{display:flex; gap:13px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--hairline);}
.tn-aside__row:first-of-type{border-top:none; padding-top:0;}
.tn-aside__row .tn-i{width:20px; height:20px; color:var(--gold); flex-shrink:0; margin-top:2px;}
.tn-aside__row b{display:block; font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; margin-bottom:2px;}
.tn-aside__row span{font-size:13.5px; line-height:1.45; color:var(--t-mid);}
.tn-aside__promo{background:var(--grad-band); border-color:var(--hairline-2);}
.tn-aside__promo p{font-size:15.5px; line-height:1.58; color:var(--blue-soft);}
.tn-aside__promo p strong{color:#fff; font-weight:600;}

/* ============================================================ WHY (split band) */
.tn-why__card{position:relative; overflow:hidden; border-radius:28px; border:1px solid var(--hairline);
  background:var(--surface-1); padding:56px 48px; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;}
.tn-why__glow{position:absolute; right:-140px; top:-120px; width:460px; height:460px; filter:blur(12px);
  background:radial-gradient(circle,rgba(255,201,33,.12),transparent 64%); pointer-events:none;}
.tn-why h2{position:relative; font-weight:800; font-size:clamp(1.9rem,3vw,2.7rem); line-height:1.08; letter-spacing:-.03em;}
.tn-why h2 .tn-hl{color:var(--gold);}
.tn-why__points{position:relative; display:flex; flex-direction:column; gap:16px;}
.tn-wp{display:flex; gap:14px; align-items:flex-start;}
.tn-wp__tick{width:30px; height:30px; flex-shrink:0; border-radius:9px; background:rgba(255,201,33,.14); border:1px solid rgba(255,201,33,.3);
  display:flex; align-items:center; justify-content:center;}
.tn-wp__tick .tn-i{width:17px; height:17px; color:var(--gold);}
.tn-wp p{font-size:16px; line-height:1.55; color:var(--t-mid);}
.tn-wp p strong{color:#fff; font-weight:600;}

/* ============================================================ FAQ */
.tn-faq__inner{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start;}
.tn-faq__list{display:flex; flex-direction:column; gap:12px;}
.tn-fitem{background:var(--surface-1); border:1px solid var(--hairline); border-radius:16px; overflow:hidden;
  transition:border-color .2s,background .2s;}
.tn-fitem[open]{border-color:var(--hairline-2); background:var(--surface-2);}
.tn-fitem summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 24px; font-family:var(--font-display); font-weight:700; font-size:17.5px; color:#fff; letter-spacing:-.01em;}
.tn-fitem summary::-webkit-details-marker{display:none;}
.tn-fitem summary .tn-i{width:22px; height:22px; color:var(--gold); flex-shrink:0; transition:transform .25s var(--ease);}
.tn-fitem[open] summary .tn-i{transform:rotate(45deg);}
.tn-fitem__a{padding:0 24px 24px; font-size:15.5px; line-height:1.62; color:var(--t-mid);}
.tn-fitem__a a{color:var(--gold-bright); text-decoration:underline; text-underline-offset:2px;}
.tn-fitem__a .note{color:var(--blue-soft); font-style:italic;}

/* ============================================================ CTA BAND */
.tn-cta{background:var(--navy-900); padding:100px 0;}
.tn-cta__inner{position:relative; overflow:hidden; border-radius:28px; background:var(--grad-band);
  border:1px solid var(--hairline-2); padding:64px 56px; box-shadow:var(--shadow-deep);}
.tn-cta__glow{position:absolute; top:-120px; right:-60px; width:480px; height:480px; filter:blur(14px);
  background:radial-gradient(circle,rgba(255,201,33,.22),transparent 62%);}
.tn-cta__grid{position:relative; display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:center;}
.tn-cta h2{font-weight:800; font-size:clamp(2.1rem,3.6vw,3.2rem); line-height:1.05; letter-spacing:-.03em; margin:16px 0;}
.tn-cta__lead{font-size:18px; line-height:1.6; color:var(--blue-soft); max-width:480px;}
.tn-cta__actions{display:flex; flex-direction:column; gap:12px;}
.tn-cta__note{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:4px; font-size:13px; color:var(--blue-soft);}
.tn-cta__note .tn-i{width:15px; height:15px; color:var(--gold);}

/* ============================================================ REVIEWS */
.tn-reviews__rating{display:flex; align-items:center; gap:16px; background:var(--surface-1); border:1px solid var(--hairline);
  border-radius:20px; padding:16px 22px;}
.tn-reviews__rating .score{font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1;}
.tn-reviews__rating .meta{font-size:13px; color:var(--t-mid); margin-top:4px;}
.tn-reviews__rating .meta strong{color:#fff;}
.tn-reviews__rating .scoreline{display:flex; align-items:center; gap:9px;}
.tn-revgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tn-rev{background:var(--surface-1); border:1px solid var(--hairline); border-radius:20px; padding:22px 22px 20px;
  transition:background .2s,border-color .2s;}
.tn-rev:hover{background:var(--surface-2); border-color:var(--hairline-2);}
.tn-rev__top{display:flex; align-items:center; gap:13px; margin-bottom:14px;}
.tn-rev__av{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff; flex-shrink:0; overflow:hidden;}
.tn-rev__av--blue{background:#2794fc;} .tn-rev__av--gold{background:#ffc921; color:var(--navy-900);}
.tn-rev__av--sky{background:#56adff;}
.tn-rev__av img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.tn-rev__who{flex:1; min-width:0;}
.tn-rev__name{font-family:var(--font-display); font-weight:700; font-size:15.5px;}
.tn-rev__when{font-size:12.5px; color:var(--t-low);}
.tn-rev__g{width:20px; height:20px; flex-shrink:0;}
.tn-rev p{font-size:14.5px; line-height:1.62; color:var(--t-mid); margin-top:12px;}
.tn-rev__src{margin-top:14px; padding-top:13px; border-top:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--t-low);}
.tn-rev__src a{color:var(--t-low);text-decoration:none;transition:color .2s;}
.tn-rev__src a:hover{color:var(--gold);}

/* ============================================================ ENTRANCE ANIMATION (inner pages, no JS) */
@keyframes tnReveal{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
body.page-template-inner-page .tn-page .tn-reveal{opacity:1; transform:none; transition:none; animation:tnReveal .7s var(--ease) both;}
@media (prefers-reduced-motion: reduce){ body.page-template-inner-page .tn-page .tn-reveal{animation:none;} }

/* ============================================================ RESPONSIVE (shared components) */
@media (max-width:940px){ .tn-svc-hero__inner{grid-template-columns:1fr; gap:48px;} }
@media (max-width:900px){
  .tn-grid-proc{grid-template-columns:1fr 1fr;}
  .tn-step__arrow{display:none;}
  .tn-form-sec__grid{grid-template-columns:1fr; gap:32px;}
  .tn-why__card{grid-template-columns:1fr; gap:32px;}
  .tn-faq__inner{grid-template-columns:1fr; gap:32px;}
  .tn-revgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .tn-section{padding:72px 0;}
  .tn-grid-proc{grid-template-columns:1fr;}
  .tn-form{grid-template-columns:1fr;}
  .tn-formcard{padding:28px 22px;}
  .tn-why__card{padding:38px 28px;}
  .tn-cta__grid{grid-template-columns:1fr; gap:32px;}
  .tn-cta__inner{padding:40px 28px;}
  .tn-revgrid{grid-template-columns:1fr;}
}