/* Brand @font-face declarations now live in the site-wide assets/css/fonts.css (enqueued on every page, so the homepage, about page and footer share them). */ /* ============================================================ Host-theme integration — full-bleed escape. GeneratePress boxes the page in #page.grid-container (max-width:1200px; padding:0 20px) and pads .site-content (30px). Those ancestors create the left/right gutter around the navy design. Drop the cap + padding ONLY on this template (scoped via the body.page-template-homepage class) so the sections reach the viewport edges. The header's .inside-header and footer's .inside-site-info keep their own inner .grid-container, so their CONTENT stays contained at 1200px. We neutralise the real constraints rather than forcing width:100vw (which ignores the scrollbar and triggers horizontal scroll). ============================================================ */ .page-template-homepage #page.grid-container{max-width:100%;padding-left:0;padding-right:0;} .page-template-homepage .site-content{padding:0;} /* Full width + centred (inner content is centred per-section by .tn-container) */ .page-template-homepage main.tn-page{width:100%;margin-left:auto;margin-right:auto;} /* ============================================================ Host-theme integration — navy page + transparent header. The GeneratePress header is kept as the one and only header; it's only RESTYLED for this template (scoped via the body class) so it floats transparently over the navy hero with light nav links. Other pages are unaffected. ============================================================ */ /* Navy everywhere outside .tn-page (around the GP header) so no white shows */ body.page-template-homepage{background-color:#031530;} /* --navy-900 */ /* Float the existing header over the hero (out of flow; the hero's padding-top:96px reserves the clearance underneath) */ .page-template-homepage .site-header{ background-color:transparent; position:fixed; /* sticky: pinned to the top on scroll */ top:0; left:0; right:0; z-index:20; transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; } /* Once scrolled past the hero top, JS adds .tn-scrolled to : semi-transparent navy + blur (frosted-glass nav over the content) */ .page-template-homepage.tn-scrolled .site-header{ background-color:rgba(3,21,48,.72); /* --navy-900 @ 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); } /* GeneratePress paints the nav block white (var(--base-3)); make it transparent so the menu floats over the navy AND the scrolled glass background shows through the nav area. Dropdown sub-menus get a navy panel (readable) rather than transparent, for when submenus are added later. */ .page-template-homepage .main-navigation{background-color:transparent;} .page-template-homepage .main-navigation ul ul{background-color:#051a3a;} /* --navy-870 */ /* Light site title + nav links over the navy */ .page-template-homepage .main-title a, .page-template-homepage .main-navigation .main-nav ul li a, .page-template-homepage .main-navigation .menu-toggle, .page-template-homepage .main-navigation .menu-bar-items{color:#ffffff;} /* Hover / current menu item → design gold */ .page-template-homepage .main-navigation .main-nav ul li:hover > a, .page-template-homepage .main-navigation .main-nav ul li.sfHover > a, .page-template-homepage .main-navigation .main-nav ul li[class*="current-menu-"] > a{color:#ffc921;} /* --gold */ /* Header extras over the navy header: light phone (gold button stays as-is) */ .page-template-homepage .tn-header-phone{color:#ffffff;} .page-template-homepage .tn-header-phone:hover{color:#ffc921;} /* --gold */ /* Live Google review avatars: real profile photo fills the circle (falls back to the coloured initials when a reviewer has no photo). */ .tn-rev__av{overflow:hidden;} .tn-rev__av img{width:100%;height:100%;border-radius:50%;object-fit:cover;} .tn-rev__src a{color:var(--t-low);text-decoration:none;transition:color .2s;} .tn-rev__src a:hover{color:var(--gold);} /* Mobile: the opened menu panel needs a solid navy background, otherwise the white links land on a transparent/white panel and vanish */ @media (max-width:768px){ .page-template-homepage .main-navigation .main-nav > ul{background-color:#051a3a;} /* --navy-870 */ } /* ============================================================ thenet.ie homepage styles — extracted from the approved Claude Design. All rules scoped under .tn-page. ============================================================ */ /* ============================================================ thenet.ie — page body styles (navy / electric-blue / gold) Scoped under .tn-page so it drops cleanly into a WP theme. ============================================================ */ .tn-page{ --navy-950:#020c1f; --navy-900:#031530; --navy-870:#051a3a; --navy-850:#07203f; --navy-800:#0a2649; --navy-700:#12386a; --blue:#2794fc; --blue-bright:#56adff; --blue-soft:#8cc6ff; --blue-deep:#1565c4; --gold:#ffc921; --gold-bright:#ffd95c; --gold-deep:#e0a900; --t-hi:#ffffff; --t-mid:#b9c8e2; --t-low:#7d90b4; --surface-1:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(255,255,255,.09); --hairline:rgba(255,255,255,.10); --hairline-2:rgba(255,255,255,.16); --grad-blue:linear-gradient(135deg,#2794fc 0%,#1565c4 100%); --grad-gold:linear-gradient(135deg,#ffd95c 0%,#ffc921 100%); --grad-band:linear-gradient(120deg,#051a3a 0%,#0a2a5e 55%,#14559e 100%); --grad-hero:radial-gradient(120% 120% at 78% 12%,rgba(39,148,252,.42) 0%,rgba(39,148,252,.04) 42%,transparent 66%),linear-gradient(168deg,#04193a 0%,#031530 60%); --ease:cubic-bezier(.22,1,.36,1); --shadow-deep:0 30px 70px rgba(0,0,0,.5); --font-display:'Plus Jakarta Sans',system-ui,sans-serif; --font-body:'Hanken Grotesk',system-ui,sans-serif; --font-mono:'Space Mono',ui-monospace,monospace; background:var(--navy-900); color:var(--t-hi); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; } .tn-page *{box-sizing:border-box;} .tn-page ::selection{background:var(--gold); color:var(--navy-900);} .tn-page h1,.tn-page h2,.tn-page h3{margin:0; font-family:var(--font-display);} .tn-page a{color:inherit; text-decoration:none;} .tn-page img{max-width:100%; display:block;} .tn-page svg{display:block;} /* --- layout --- */ .tn-container{width:100%; max-width:1200px; margin:0 auto; padding:0 32px;} .tn-section{padding:104px 0;} .tn-head{max-width:640px;} .tn-head--center{margin:0 auto; text-align:center;} .tn-eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);} .tn-eyebrow::before{content:""; width:22px; height:1.5px; background:currentColor;} .tn-head h2{font-weight:800; font-size:clamp(2rem,3.4vw,3.1rem); line-height:1.08; letter-spacing:-.025em; margin-top:18px;} .tn-head .tn-sub{font-size:18.5px; line-height:1.6; color:var(--t-mid); margin-top:18px;} .tn-row-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:52px;} /* --- buttons --- */ .tn-btn{font-family:var(--font-display); font-weight:700; border:none; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap; letter-spacing:-.01em; padding:14px 26px; font-size:15px; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease);} .tn-btn .tn-i{width:17px; height:17px;} .tn-btn--lg{padding:17px 34px; font-size:16.5px;} .tn-btn--lg .tn-i{width:19px; height:19px;} .tn-btn--primary{background:var(--grad-gold); color:var(--navy-900); box-shadow:0 2px 10px rgba(255,201,33,.18);} .tn-btn--primary:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(255,201,33,.32);} .tn-btn--ghost{background:transparent; color:#fff; border:1.5px solid var(--hairline); transition:color .18s var(--ease);} .tn-btn--ghost:hover{background:var(--surface-2); border-color:var(--hairline-2); transform:translateY(-1px); color:var(--gold);} .tn-btn--block{width:100%;} /* --- badges --- */ .tn-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:5px 12px; white-space:nowrap;} .tn-badge--gold{background:rgba(255,201,33,.14); color:var(--gold); border:1px solid rgba(255,201,33,.3);} .tn-badge--blue{background:rgba(39,148,252,.16); color:var(--blue-bright); border:1px solid rgba(39,148,252,.34);} .tn-badge--solid{background:var(--gold); color:var(--navy-900); border:1px solid transparent;} .tn-badge .tn-dot{width:7px; height:7px; border-radius:50%; background:currentColor;} /* --- stars --- */ .tn-stars{display:inline-flex; gap:2px;} .tn-stars svg{width:15px; height:15px; fill:var(--gold);} .tn-stars--sm svg{width:14px; height:14px;} /* --- icons --- */ .tn-i{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;} /* ============================================================ HERO */ .tn-hero{position:relative; background:var(--grad-hero); overflow:hidden; padding-top:96px;} .tn-hero__grid-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 75% 70% at 72% 22%,#000,transparent 72%); mask-image:radial-gradient(ellipse 75% 70% at 72% 22%,#000,transparent 72%);} .tn-hero__glow{position:absolute; top:-120px; right:-80px; width:560px; height:560px; pointer-events:none; filter:blur(20px); background:radial-gradient(circle,rgba(39,148,252,.32),transparent 62%);} .tn-hero__inner{position:relative; display:grid; grid-template-columns:1.06fr .94fr; gap:60px; align-items:center; padding:40px 0 96px;} .tn-pill{display:inline-flex; align-items:center; gap:11px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:999px; padding:7px 7px 7px 16px; margin-bottom:28px;} .tn-pill__txt{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--t-mid); font-weight:500;} .tn-hero h1{font-weight:800; font-size:clamp(2.7rem,4.8vw,4.4rem); line-height:1.03; letter-spacing:-.03em; margin-bottom:28px; text-wrap:balance;} .tn-hero h1 .tn-hl{color:var(--gold);} .tn-hero__lead{font-size:19px; line-height:1.62; color:var(--t-mid); margin-bottom:40px; max-width:500px;} .tn-hero__cta{display:flex; align-items:center; gap:14px; margin-top:0; margin-bottom:40px; flex-wrap:wrap;} .tn-trust{display:flex; align-items:center; gap:16px;} .tn-avatars{display:flex;} .tn-avatars .tn-av{width:40px; height:40px; border-radius:50%; border:2.5px solid var(--navy-900); margin-left:-13px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:13px; color:#fff;} .tn-avatars .tn-av:first-child{margin-left:0;} .tn-av--a{background:#2794fc;} .tn-av--b{background:#ffc921; color:var(--navy-900);} .tn-av--c{background:#56adff;} .tn-av--d{background:#1565c4;} .tn-trust__txt{font-size:14px; color:var(--t-mid); line-height:1.4;} .tn-trust__txt strong{color:#fff; display:block; font-family:var(--font-display);} /* hero dashboard card */ .tn-dash{position:relative;} .tn-dash__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:26px;} .tn-dash__top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;} .tn-dash__eyebrow{font-family:var(--font-mono); font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-bright);} .tn-dash__big{font-family:var(--font-display); font-weight:800; font-size:38px; line-height:1; margin-top:10px;} .tn-chartwrap{width:100%;} .tn-chartwrap svg{width:100%; height:auto;} .tn-chart-line{stroke:url(#tnLine); stroke-width:3.5; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1000; stroke-dashoffset:1000; animation:tnDraw 1.7s var(--ease) forwards;} @keyframes tnDraw{to{stroke-dashoffset:0;}} .tn-dash__stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; margin-top:18px;} .tn-dash__stat{background:var(--surface-2); border:1px solid var(--hairline); border-radius:14px; padding:13px 14px;} .tn-dash__stat .k{font-family:var(--font-mono); font-size:10.5px; color:var(--t-low); text-transform:uppercase; letter-spacing:.1em;} .tn-dash__stat .v{font-family:var(--font-display); font-weight:800; font-size:21px; margin-top:3px;} .tn-dash__stat .v.gold{color:var(--gold);} .tn-dash__stat .v.blue{color:var(--blue-bright);} .tn-dash__stat .v.hi{color:#fff;} .tn-dash__chip{position:absolute; bottom:-20px; left:-24px; background:var(--grad-gold); color:var(--navy-900); border-radius:14px; padding:13px 17px; box-shadow:0 14px 34px rgba(255,201,33,.32); display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:14px;} /* ============================================================ TRUST STRIP */ .tn-strip{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--navy-950); padding:26px 0;} .tn-strip__inner{display:flex; align-items:center; gap:32px;} .tn-strip__label{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t-low); white-space:nowrap; line-height:1.4;} .tn-marquee{flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .tn-marquee__track{display:flex; gap:48px; width:max-content; animation:tnMarq 32s linear infinite;} .tn-marquee__track span{font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--t-low); white-space:nowrap; opacity:.75;} @keyframes tnMarq{to{transform:translateX(-50%);}} /* ============================================================ SERVICES */ .tn-services{background:var(--navy-900);} .tn-grid-services{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;} .tn-svc{position:relative; background:var(--surface-1); border:1px solid var(--hairline); border-radius:20px; padding:26px 24px 24px; overflow:hidden; transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease);} .tn-svc::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; opacity:0; transition:opacity .22s;} .tn-svc--blue::before{background:var(--blue-bright);} .tn-svc--gold::before{background:var(--gold);} .tn-svc:hover{transform:translateY(-4px); background:var(--surface-2); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);} .tn-svc:hover::before{opacity:1;} .tn-svc__top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;} .tn-svc__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;} .tn-svc--blue .tn-svc__icon .tn-i{color:var(--blue-bright);} .tn-svc--gold .tn-svc__icon .tn-i{color:var(--gold);} .tn-svc__tag{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t-low);} .tn-svc h3{font-weight:700; font-size:20px; letter-spacing:-.02em; margin-bottom:9px;} .tn-svc p{font-size:15px; line-height:1.58; color:var(--t-mid);} .tn-svc__more{display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--t-low); transition:color .2s;} .tn-svc__more a{display:inline-flex; align-items:center; gap:7px; color:var(--t-low); transition:color .2s;} .tn-svc__more .tn-i{width:15px; height:15px; transition:transform .2s;} .tn-svc:hover .tn-svc__more a{color:var(--gold);} .tn-svc:hover .tn-svc__more .tn-i{transform:translateX(3px);} .tn-svc--more{background:var(--grad-band); border:1px solid var(--hairline-2); display:flex; flex-direction:column; justify-content:space-between; min-height:180px; transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);} .tn-svc--more:hover{transform:translateY(-4px); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);} .tn-svc--more h3{margin:0 0 7px; color:#fff;} .tn-svc--more p{font-size:14.5px; color:var(--blue-soft);} .tn-svc--more:hover h3{color:#fff;} .tn-svc--more:hover p{color:var(--blue-bright);} /* ============================================================ OUR WORK */ .tn-work{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));} .tn-grid-work{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;} .tn-wc{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--hairline); background:var(--navy-850); min-height:280px; transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);} .tn-wc:hover{transform:translateY(-4px); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);} .tn-wc--feat{grid-column:span 2; min-height:420px;} .tn-wc__img{width:100%; height:100%; object-fit:cover;} .tn-wc--feat .tn-wc__img{height:100%;} .tn-wc__scrim{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 36%,rgba(3,21,48,.6) 70%,rgba(3,21,48,.96) 100%);} .tn-wc__badge{position:absolute; top:16px; left:16px;} .tn-wc__meta{position:absolute; left:20px; right:20px; bottom:18px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px;} .tn-wc__name{font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.02em; line-height:1.1;} .tn-wc--feat .tn-wc__name{font-size:25px;} .tn-wc__sector{font-size:13.5px; color:var(--blue-soft); margin-top:3px;} .tn-wc__link{width:40px; height:40px; border-radius:50%; background:var(--surface-3); border:1px solid var(--hairline-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s;} .tn-wc__link .tn-i{width:18px; height:18px;} .tn-wc:hover .tn-wc__link{background:var(--gold);} .tn-wc:hover .tn-wc__link .tn-i{color:var(--navy-900);} .tn-wc--cta{border:1px dashed var(--hairline-2); background:var(--surface-1); min-height:220px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:28px;} .tn-wc--cta .tn-i{width:26px; height:26px; color:var(--blue-bright);} .tn-wc--cta h3{font-weight:800; font-size:20px; letter-spacing:-.02em; margin:14px 0 6px;} .tn-wc--cta p{font-size:14.5px; color:var(--t-mid); margin-bottom:16px; line-height:1.5;} /* ============================================================ STATS BAND */ .tn-statsband{background:var(--navy-900); padding:100px 0 0;} .tn-statsband__inner{background:var(--grad-band); border:1px solid var(--hairline-2); border-radius:28px; padding:54px 48px; position:relative; overflow:hidden; box-shadow:var(--shadow-deep);} .tn-statsband__motif{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:44px 44px; opacity:.5; -webkit-mask-image:radial-gradient(ellipse 70% 120% at 90% 0%,#000,transparent 70%); mask-image:radial-gradient(ellipse 70% 120% at 90% 0%,#000,transparent 70%);} .tn-statsgrid{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:32px;} .tn-stat{padding-left:32px; border-left:1px solid var(--hairline-2);} .tn-stat:first-child{padding-left:0; border-left:none;} .tn-stat__num{font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; letter-spacing:-.03em;} .tn-stat__label{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--gold); margin-top:12px;} .tn-stat__sub{font-size:13.5px; color:var(--blue-soft); margin-top:3px;} /* ============================================================ IMPACT */ .tn-impact{position:relative; background:var(--navy-950); overflow:hidden;} .tn-impact__glow{position:absolute; left:-140px; bottom:-160px; width:520px; height:520px; filter:blur(10px); background:radial-gradient(circle,rgba(39,148,252,.18),transparent 64%);} .tn-impact__inner{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;} .tn-impact h2{font-weight:800; font-size:clamp(2.2rem,3.8vw,3.4rem); line-height:1.06; letter-spacing:-.03em; margin:18px 0 22px;} .tn-impact h2 .tn-hl{color:var(--gold);} .tn-impact__lead{font-size:18.5px; line-height:1.62; color:var(--t-mid); margin-bottom:32px; max-width:520px;} .tn-impact__cta{display:flex; gap:14px; flex-wrap:wrap;} .tn-proofs{display:flex; flex-direction:column; gap:14px;} .tn-proof{display:flex; gap:18px; padding:22px 24px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:20px;} .tn-proof__icon{width:48px; height:48px; flex-shrink:0; border-radius:14px; background:var(--grad-blue); display:flex; align-items:center; justify-content:center;} .tn-proof__icon .tn-i{color:#fff;} .tn-proof h3{font-weight:800; font-size:19px; letter-spacing:-.02em; margin-bottom:5px;} .tn-proof p{font-size:14.5px; line-height:1.55; color:var(--t-mid);} /* ============================================================ PROCESS */ .tn-process{background:var(--navy-900);} .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{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;} /* ============================================================ REVIEWS */ .tn-reviews{background:linear-gradient(180deg,var(--navy-950),var(--navy-900));} .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{column-count:3; column-gap:16px;} .tn-rev{break-inside:avoid; margin-bottom:16px; 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;} .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--deep{background:#1565c4;} .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);} /* ============================================================ 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);} /* --- scroll reveal --- */ .tn-reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease);} .tn-reveal.tn-in{opacity:1; transform:none;} /* ============================================================ RESPONSIVE */ @media (max-width:900px){ .tn-hero__inner{grid-template-columns:1fr; gap:48px;} .tn-dash{max-width:480px;} .tn-impact__inner{grid-template-columns:1fr; gap:40px;} .tn-revgrid{column-count:2;} .tn-grid-proc{grid-template-columns:1fr 1fr;} .tn-step__arrow{display:none;} } @media (max-width:860px){ .tn-grid-work{grid-template-columns:1fr 1fr;} .tn-wc--feat{grid-column:span 1; min-height:280px;} .tn-wc--feat .tn-wc__img{height:100%;} .tn-wc--feat .tn-wc__name{font-size:18px;} } @media (max-width:760px){ .tn-statsgrid{grid-template-columns:1fr 1fr; gap:28px;} .tn-stat{border-left:none; padding-left:0;} .tn-cta__grid{grid-template-columns:1fr; gap:32px;} } @media (max-width:600px){ .tn-section{padding:72px 0;} .tn-revgrid{column-count:1;} .tn-grid-proc{grid-template-columns:1fr;} .tn-grid-work{grid-template-columns:1fr;} .tn-cta__inner{padding:40px 28px;} .tn-statsband__inner{padding:40px 28px;} }