/* Theme Name: tcctheme Theme URI: https:///tcc.me.uk Author: AW-M Description: Converted from HTML/CSS Version: 1.0 */
/* Generic styles */

@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-v51-latin-100.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-v51-latin-200.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-v51-latin-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-v51-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-v51-latin-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-v51-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-v51-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-v51-latin-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Open Sans';
	src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: 'Open Sans';
	src: url('fonts/open-sans-v44-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: optional;
}


:root {
	--text-color: #fafafa;
	--white: #fafafa;
	--black: #000000;
	--off-black:#010a0f;
	--new-black:#2a2a2a;
	--grey: #dbdada;
	--lapis: #024260;
	--highlt: #0472a6;
	--gunmetal: #151618;
	--tawny: #ee680f;
	--tawnylight:#f26100;
	--tawnylighter:#ff8a3c;
	--tawnylighterstill:#ffb584;
	--tawnylightest:#ffe0cc;
	--tccbluedarkest:#031b27;
	--tccbluedarker:#001824;
	--tccbluedark: #042f44;
	--tccbluedarkish:#004666;
	--tccblue:#035e89;
	--tccbluelight:#0472a6;
	--tccbluelighter:#6a8794;
	--lightlapis: #f0faff;
	--lightgrey: #e7e7e7;
	--oxford: #000022;
	--rosewood: #570000;
	--curve: 7;
	--speed: 80s;
	--speed2: 20s;
	--cloud-width: min(40vw);
	--cloud-width2: min(100vw);
    --glass-opacity: 0.024;
	--league-buttons-width: 23rem;
	--burger-box: 40px;   /* width of both burger buttons */
	--burger-right: 20px; /* gap between each burger and the right edge */
}

html {
	font-size: 62.5%;
	scroll-behavior:smooth;
	scrollbar-gutter: stable;
}

* {
	box-sizing: border-box;
}

html,
body {
	overflow-x: hidden;
	overflow-y: auto !important;
	position: static !important;
}

body {
	margin: 0;
	padding: 0;
	padding-top: var(--total-nav-height, 126px);
	width: 100vw;
	background-color:var(--white);
	font-family: 'Roboto', 'Open Sans','Segoe UI', sans-serif;	
	color:var(--new-black);
}

img {
	width: 100%;
	border-radius:10px;
}

p {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.6;
}

strong {
	/* font-family: 'Roboto', 'Open Sans','Segoe UI', sans-serif;	 */
	font-weight: 600;
}

h1 {
	font-size: 2.8rem;
	font-weight: 400;
	color:var(--white);
}

h2 {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--tccbluedarker);
	margin-bottom:1em;
}

h3 {
	font-size: 2rem;
	padding-left: 0;
	font-weight:700;
}

/* Headings: spread the words evenly across lines, so a heading never
   ends with one word on its own. Paragraphs: avoid a single orphaned
   word on the last line. Browsers that don't support these ignore them. */
h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

h4 {
	padding-left: 0;
}

h5 {
	font-size: 1.1rem;
}

li.d-flex.align-items-center.animated {
	font-family:  'Segoe UI', 'Open Sans', sans-serif;
}

.search-thumb-wrap {
    width: 100%;
    aspect-ratio: 16 / 9; /* pick whatever ratio suits your grid */
    overflow: hidden;
    border-radius: 0.375rem; /* matches Bootstrap's "rounded" */
}

.search-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tcc-results-sort {
    flex-wrap: nowrap;
}

.tcc-results-sort label {
    white-space: nowrap;
}

.tcc-results-sort .form-select {
    height: 40px;
    min-height: 40px;
    padding: 0.75rem 3rem 0.75rem 1.25rem;
    font-size: 1.1rem;
    border: 1px solid #ced4da;
    cursor: pointer;
    box-sizing: border-box;
}

.tcc-results-sort .form-select:focus {
    border-color: #035e89;
    box-shadow: 0 0 0 0.2rem rgba(3, 94, 137, 0.15);
}

/* ========================================
   TCC SEARCH RESULTS FORM
======================================== */

.tcc-results-search .search-input-wrap {
    position: relative;
    width: 80%;
}

.tcc-results-search .form-control {
    height: 40px;
    min-height: 40px;
    padding: 0.75rem 4.5rem 0.75rem 1.25rem;
    font-size: 1.6rem;
    border: 1px solid #ced4da;
    border-radius: 50em;
    box-sizing: border-box;
}

.tcc-results-search .form-control:focus {
    border-color: #035e89;
    box-shadow: 0 0 0 0.2rem rgba(3, 94, 137, 0.15);
}

.tcc-results-search .search-icon-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 40px;
    padding: 0;
    background: #e8631c;
    border: 0;
    border-radius: 0 50rem 50rem 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tcc-results-search .search-icon-btn:hover {
    background: #cf5615;
}

.tcc-results-search .search-icon {
    width: 22px;
    height: 22px;
}

.tcc-results-search .search-icon-btn:focus-visible {
    outline: 2px solid #035e89;
    outline-offset: 3px;
}

/* Pricing table — mobile-first.
   BELOW 1440px (the default styles here): sticky label column, cards
   scroll underneath it.
   FROM 1440px UP: desktop 3-column card table — see the
   min-width: 1440px block near the end of this file.
   Row alignment across the label column and all three cards is
   achieved with matching min-heights on corresponding row types,
   rather than a single CSS Grid — this is what lets the exact same
   markup restructure between the mobile sticky-carousel layout and
   the desktop table without needing separate desktop/mobile markup. */

.pricing-table-wrap {
	position: relative;
	background: var(--white);
	border-radius: 16px;
	padding: 1.5em 0 0; /* no side padding, so the table's left edge lines
	                        up with the text above it */
	margin-top: 1.5em;
	overflow-x: auto; /* safety net: if the table genuinely can't fit,
	                      it scrolls within its own box rather than
	                      spilling past the column and eating the
	                      right-hand margin */
}

/* Restructured approach: below 1440px .pricing-labels is taken out of
   normal flex flow entirely via position:absolute, rather than
   position:sticky sitting alongside the cards inside the same
   scroll container. Combining sticky positioning with scroll-snap
   on the same axis was a well-documented, genuinely unreliable
   combination across browsers, which is why sticky was already
   removed here. Scroll-snap itself has since ALSO been removed
   entirely — after several rounds of fixes each revealing
   a new snap-related edge case, it became clear the exact
   interaction between scroll-snap-align and margin/padding on
   the snap container is a genuinely ambiguous, inconsistently
   implemented area of the spec, not something reliably fixable
   with more CSS tuning. Removing it keeps every actual
   requirement (card 1 by default, free-scroll through the rest,
   working prev/next buttons) while eliminating that entire class
   of bugs — the only thing lost is "magnetic" snapping to exact
   card edges on a manual swipe; the buttons still move exactly
   one card at a time via JS. */

.pricing-scroll {
	display: flex;
	align-items: stretch;
	outline: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	min-width: 0; /* let it shrink to its parent's real width so
	                 its content can overflow it and scroll */
	padding-left: 150px; /* reserves space so the first card
	                         doesn't render underneath the label
	                         overlay. Plain padding is unambiguous
	                         now that there's no scroll-snap in
	                         the mix to interact with it. */
	padding-top: 3rem; /* room for the "Recommended" badge, which sits
	                      above the top of the Growth card. Below 1440px
	                      this element scrolls sideways, and a scrolling
	                      box clips anything outside its padding, so
	                      without this the top of the badge was cut off.
	                      .pricing-label-header gets the same 3rem as a
	                      top margin, so the labels stay level with the
	                      cards. Both go back to 0 from 1440px up. */
}

.pricing-scroll:focus-visible {
	outline: 3px solid var(--tawny);
	outline-offset: 4px;
}

.pricing-labels,
.pricing-card {
	display: flex;
	flex-direction: column;
}

.pricing-labels {
	flex: 0 1 330px; /* widened from 220px so longer labels like
	                     "Core software, plugin & theme updates" fit
	                     on one line instead of wrapping */
	padding-right: 0.5em;
	position: absolute;
	top: 1.5em; /* matches .pricing-table-wrap's own top padding —
	                this was missing before (top was 0), which is
	                why the label column rendered 1.5em higher
	                than the cards: .pricing-scroll (containing
	                the cards) is normal in-flow content and gets
	                pushed down by the wrap's padding, but the
	                absolutely-positioned overlay at top:0 ignored
	                that same padding entirely */
	left: 0; /* .pricing-table-wrap has no side padding, so the label
	            column starts at its left edge, in line with the text
	            above the table */
	height: calc(100% - 1.5em); /* reduced to match the added top
	                                offset, so the bottom edge
	                                still lines up correctly (the
	                                wrap's own bottom padding is 0,
	                                per its padding: 1.5em 1.5em 0) */
	z-index: 2;
	width: 150px; /* widened from 130px to comfortably fit the
	                 longer half of each label's 2-line split */
	background:var(--white); /* opaque — must match the section background
	                        so scrolling cards visually disappear
	                        behind this column rather than showing
	                        through it */
	box-shadow: 4px 0 6px -3px rgba(0, 0, 0, 0.15);
}

.pricing-card {
	/* Fixed, equal width for all three cards below 1440px — chosen to
	   comfortably fit the widest content (the "Start Today"
	   button and "Ongoing SEO/AEO/GEO" text). True auto-sized
	   "shrink to fit the widest sibling's content, but keep all
	   equal" isn't something plain CSS can compute without JS
	   measuring rendered content, so this is a manually-chosen
	   estimate — nudge the value if any card still looks cramped
	   or has noticeably excess empty space once you see it live. */
	flex: 0 0 200px;
	min-width: 0;
	padding: 0 1em;
	text-align: center;
	position: relative;
}

.pricing-card.is-featured {
	background:var(--white);
	border-radius: 12px 12px 0 0;
}

.pricing-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background:var(--white);
	border: 1px solid var(--tawny);
	color: var(--tawny);
	font-size: 1.1rem;
	font-weight: 600;
	padding: 0.3em 1em;
	border-radius: 20px;
	white-space: nowrap;
	z-index: 1;
	margin-top:0.5em;
}

/* Row height pairs — these must match between .pricing-labels and
   every .pricing-card for rows to visually align as a table. */
.pricing-label-header,
.pricing-card-header {
	min-height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--tccbluedark);
	color: var(--white);
	border-radius: 10px 10px 0 0;
	padding: 0.25em;
}

.pricing-label-header {
	background: transparent;
	margin-top: 3rem; /* matches .pricing-scroll's padding-top */
}

.pricing-card.is-featured .pricing-card-header {
	background: var(--tawny);
}

.pricing-tier-name {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
}

.pricing-tier-price {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
}

.pricing-tier-price span {
	font-weight: 400;
	font-size: 1.2rem;
}

.pricing-label,
.pricing-row {
	min-height: 45px;
	display: flex;
	align-items: center;
	font-size: 1.4rem;
}

/* Left-hand labels. The selector is deliberately .pricing-labels
   .pricing-label (two classes) so it wins over any other single-class
   rule that might be thinning or greying the text. The 1440px-up
   block near the end repeats the same selector for its single-line
   desktop overrides. Row height is matched on .pricing-row so
   alignment with the scrolling cards is preserved. */
.pricing-labels .pricing-label {
	font-family: 'Roboto', 'Open Sans', 'Segoe UI', sans-serif;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--tccbluedarker);
	padding-left: 0.5rem;
	border-bottom: 1px solid #f0c3a3;
	white-space: normal;
	min-height: 45px; /* raised from 48px — that estimate was too
	                      tight for real 2-line text rendering, so
	                      each label grew slightly taller than its
	                      matching card row and that small excess
	                      compounded row by row going down the
	                      list, producing the progressive drift */
	line-height: 1.25;
}

.pricing-row {
	justify-content: center;
	border-bottom: 1px solid #f0c3a3; /* matches the label divider so the
	                                     line runs through as one */
	min-height: 45px; /* must stay matched to .pricing-labels .pricing-label above */
}

/* The global .circle-tick rule sets align-self: flex-start (so it lines
   up with the first line of a tick list). Inside a pricing row that
   overrides the row's align-items: center and pins the tick to the top,
   so it has to be reset here. */
.pricing-row .circle-tick {
	align-self: center;
	margin: 0 auto;
}

.pricing-dash {
	color: #c9b8b0;
	font-weight: 700;
}

.pricing-label-footer,
.pricing-card-footer {
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mobile scroll controls — shown below 1440px, hidden from 1440px up */
.pricing-scroll-controls {
	display: flex;
	justify-content: center;
	gap: 1em;
	padding: 2em 0;
}

.pricing-scroll-controls button {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid var(--tawny);
	background: transparent;
	color: var(--tawny);
	font-size: 3rem;
	cursor: pointer;
	
}

.pricing-scroll-controls button:hover {
	background: var(--tawny);
	color: var(--white);
}

.decor-circles--left,
.decor-circles--right {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.decor-circle {
	position: absolute;
	width: var(--size, 80px);
	height: var(--size, 80px);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	will-change: top, left;
}

/* Make sure the section's own text/content sits above the circles */
.block-grad > .row,
.block-grad > .container {
	position: relative;
	z-index: 1;
}

label {
font-size: 0.9em;
}
  
label .required-asterisk {
color: #d9534f;
margin-left: 2px;
}

.bg-white {
	background-color: var(--white);
}

.bg-white-card {
	background-color: #ffffff52;
}

.bg-gunmetal {
	background-color: var(--gunmetal);
}

.bg-tawny {
	background-color: var(--tawny);
}

.tawny {
	color: var(--tawny);
}

.image-collage {
	position: relative;
	width: 100%;
	padding-bottom: 2rem; /* gives room for the second image to overhang without clipping */
}

.collage-img-1 {
	position: relative;
	width: 50%;
	z-index: 1;
}

.collage-img-2 {
	position: absolute;
	top: 70%;
	right: 7%;
	width: 65%;
	z-index: 2;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Orange 27+ card on the Areas We Cover hub: moved down on phones and
   tablets so it sits below the collage's overhanging second photo
   instead of underneath it. The photo hangs down by about a third of
   the column's width, and a percentage margin is also a share of the
   width, so the gap grows and shrinks with the photo. From 992px up
   the margin is removed (see the 992px block). */
.tcc-card-clear {
	margin-top: 35%;
}

/* ============ EXPERIENCE SECTION (web-design.php) ============ */
/* Mobile-first. Below 992px the text column (.tcc-exp-text), the image
   column (.tcc-exp-media) and the collage wrapper are unwrapped with
   display: contents, so the paragraphs, the tick list and each photo
   become items of one stacked column. The order values then interleave
   them: intro, photo 1, service areas, photo 2, tick list, rule. The
   27+ card sits in its own row straight after, so it follows the rule.
   To change the stacking order, change the order numbers below.
   From 992px up (see the min-width: 992px block) the two columns and
   the overlapping collage return exactly as before. Scoped to .tcc-exp
   so the collage on any other page is unaffected. */
.tcc-exp {
	flex-direction: column;
}

.tcc-exp-text,
.tcc-exp-media,
.tcc-exp .image-collage {
	display: contents;
}

.tcc-exp-intro {
	order: 1;
}

.tcc-exp .collage-img-1 {
	order: 2;
}

.tcc-exp-areas {
	order: 3;
}

.tcc-exp .collage-img-2 {
	order: 4;
}

.tcc-exp-list {
	order: 5;
}

.tcc-exp-rule {
	order: 6;
}

/* Each photo full width between the blocks of text, with no overlap */
.tcc-exp .collage-img-1,
.tcc-exp .collage-img-2 {
	position: static;
	width: 100%;
	margin: 1rem 0 3rem;
}

/* The 27+ card sizes to its text below 992px (it was a fixed 25%,
   which squeezed "27+ years" onto two lines on phones). */
.tcc-exp-card {
	width: fit-content;
}

/* Tick list text at the same size as the paragraphs around it: 1.4rem
   here, 1.7rem from 1800px up (see the 1800px block), the same as p.
   Without this it had no size of its own below 1800px and fell back to
   the 10px root size. */
.tcc-exp-list {
	font-size: 1.4rem;
}
/* ============ END EXPERIENCE SECTION ============ */

/* Paragraphs with Bootstrap's w-75: full width on phones, 75% from
   768px up (see the 768px block). :where(p) keeps the specificity the
   same as Bootstrap's own .w-75, so this wins only because it loads
   later, and responsive helpers further down the file (e.g. w-lg-50 on
   the Model Hero Sections intro) still override it. Only paragraphs are
   affected; w-75 on images, cards and other elements is unchanged. */
:where(p).w-75 {
	width: 100% !important;
}

/* Small bold titles for article listings: the "Latest Articles" cards
   (Training hub) and the search results page. Previously only set from
   1800px up, so below that the titles fell back to the thin, larger h4
   style. A class beats the h4 rules at every width. */
.search-item-title {
	font-size: 1.4rem;
	line-height: 1.3;
	margin: 0 0 0.8rem;
	font-family: 'Segoe UI', Roboto, sans-serif;
	font-weight: 700;
}

/* ============ SECTION MENU + BREADCRUMBS (single source of truth) ============ */
/* Generic collapsible sub-menu + breadcrumb bar, reused across any
   section of the site (Tuition, Computing Services, etc.) via
   template-parts/subnav.php — not tied to any one subject. */

.section-menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, .5);
   z-index: 998;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s ease;
   cursor: pointer;
}

.section-menu-checkbox:checked ~ .section-menu-overlay {
   opacity: 1;
   pointer-events: auto;
}

.section-menu-checkbox {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

/* Force both black bars to the same height, vertically centred content */
.section-menu-row .col,
.breadcrumb-col {
   display: flex !important;
   align-items: center !important;
   min-height: 50px !important;
}

.section-menu-toggle {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center; /* centres the lines inside the box */
   align-self: center;
   gap: 6px;
   width: var(--burger-box);
   height: var(--burger-box);
   cursor: pointer;
   margin-left: auto;
   margin-right: calc(var(--burger-right) + 7px); /* +7px lines it up with the header burger */
   flex-shrink: 0;
   position: relative;
   z-index: 1000; /* sits above .section-menu-overlay's z-index: 998 */
}

.section-menu-toggle span {
   display: block;
   height: 2px;
   width: 25px;
   background-color: #fff;
   border-radius: 2px;
   transition: transform 0.3s ease, opacity 0.3s ease;
}

.section-menu-checkbox:checked ~ .section-menu-toggle span:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
}
.section-menu-checkbox:checked ~ .section-menu-toggle span:nth-child(2) {
   opacity: 0;
}
.section-menu-checkbox:checked ~ .section-menu-toggle span:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg);
}

.section-menu-anchor {
   position: relative;
}

#section-menu {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background-color: var(--tccbluedark);
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.75s ease;
   z-index: 999;
   padding: 0 2em;
   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}

.section-menu-checkbox:checked ~ #section-menu {
   max-height: 500px;
   transition: max-height 1.5s ease;
}

#section-menu .menu {
   display: flex !important;
   flex-direction: column !important;
   gap: 16px;
   padding: 20px 20px 50px;
   height: auto !important;
   margin: 0;
   font-size: 2rem;
}

.breadcrumbs-wrap {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: max-content;
		padding-left:0px;
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		white-space: nowrap;
		width: 100%;
}

.breadcrumbs {
	font-size: 1.2rem;
	font-weight: 400;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* ============ END SECTION MENU + BREADCRUMBS ============ */
.new-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #b0b0b0;
    transition: color 0.3s ease-out;
    z-index: 0;
	background-color:#61606079;
}

.new-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--tawny);
    clip-path: circle(0% at 0% 100%);
    transition: clip-path 0.3s ease-out;
    z-index: -1;
}

.new-card:hover::before {
    clip-path: circle(150% at 0% 100%);
}

.new-card h3 {
	padding-top: 0.5em;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--tccbluedark);
	transition: color 0.3s ease-out;
}

.new-card svg {
    color: var(--tawny);
    transition: color 0.3s ease-out;
}

.new-card p {
    color: var(--white);
	font-size:1.4rem;
}

.new-card:hover svg,
.new-card:hover h3 {
    color: #302f2f;
}

.new-card:hover p {
    color: var(--white);
}

/* ---- light variant: "Benefits of Choosing TCC" cards ---- */

.new-card-light {
    background-color: #f2f2f2;
    border-color: #ccc;
}

.new-card-light > p,
.new-card-light > h3 {
    color: var(--new-black);
}

.new-card-light h3 {
    color: #ff7f2a;
    padding-top: 1.75rem;
    transition: color 0.3s ease-out;
}

.new-card-light:hover {
    color: #fff;
}

.new-card-light:hover p {
    color: #fff;
}

.new-card-light:hover .card-icon {
    color: #fff;
}

.new-card-light.big-card-height > p,
.new-card-light.big-card-height > h3 {
    font-size: 1.2rem;
}

/* Town cards (Areas We Cover hub). Bold dark-blue titles, a tighter
   tick list in a smaller size than the card text (1.2rem against the
   card's 1.4rem paragraph, at every width), and town links in the
   title colour with a thin orange underline. On hover the card turns
   orange, so the links go white with the rest of the text. */
.area-card h3 {
	font-weight: 700;
	color: var(--tccbluedarker);
}

.area-card .tcc-tick-list-centered li {
	padding-left: 0;
	font-size: 1.2rem;
	line-height: 1.6;
	margin-bottom: 0.4em;
}

.area-card .tcc-tick-list-centered .circle-tick {
	margin-left: 0;
	margin-right: 0.6em;
	margin-top: calc((1lh - 1.25em) / 2);
}

.area-card .tcc-tick-list-centered a {
	color: var(--tccbluedarker);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--tawny);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.3s ease-out;
}

.area-card .tcc-tick-list-centered a:hover,
.area-card .tcc-tick-list-centered a:focus-visible {
	text-decoration-thickness: 2px;
}

.area-card:hover .tcc-tick-list-centered a {
	color: var(--white);
	text-decoration-color: var(--white);
}
/* Information for Parents cards (Home Tuition hub). All six cards sit
   in one grid so they can share a height. Below 1400px they stack in a
   single column at their natural heights; from 1400px up (see the
   min-width: 1400px block) they form two rows of three, and
   grid-auto-rows: 1fr makes every row as tall as the tallest card, so
   all six cards are the same size across both rows. The gaps and
   padding reproduce the spacing the old column padding gave. */
.tcc-parent-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	padding: 1.5rem 3rem;
}

.scrolltotop {
    position: fixed;
    right: 2%;
    top: 90%;
    width: 45px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    z-index: 9999;
}

.scrolltotop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cog-step {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline: none; /* no focus box when tapped; the reveal itself shows it's active */
}

img.square{
	border-radius:0;
}

.cog {
    display: inline-block;
    transform-origin: center;
    --spin-direction: 1;
	z-index:99999;
}

.cog.reverse {
    --spin-direction: -1;
}

/* Tapping a step on a phone or tablet focuses it (it has tabindex="0"
   in the markup), so :focus gives touch screens the same spin and
   reveal as hovering does with a mouse. Tapping elsewhere closes it.
   Also works for keyboard users tabbing through the steps. */
.cog-step:hover .cog,
.cog-step:focus .cog {
    animation: cog-spin 1.8s cubic-bezier(.15, .85, .25, 1) forwards;
}

@keyframes cog-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(calc(720deg * var(--spin-direction)));
    }
}

.cog-step .cog-text {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-1rem);
	transition: max-height 0.45s ease, opacity 0.35s ease-out, transform 0.45s ease-out;
}

.cog-step:hover .cog-text,
.cog-step:focus .cog-text {
	max-height: 400px; /* generous ceiling — must exceed the tallest expanded content */
	opacity: 1;
	transform: translateY(0);
}

.arrow::after{
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url(images/right-arrow-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: -1.6em;
    margin-left: 8px;
}

.arrow{
	color:#ff7f2a;
	font-size:1.4rem;
	transition: transform 0.3s ease;}

	.arrow:hover::after{
	animation: bounce-arrow 0.3s ease infinite alternate;
}

@keyframes bounce-arrow {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(8px);
	}
}

/* ============ SHARED HERO (.tcc-hero) ============ */
/* Two sizes, matching the page hierarchy:
   - Full photo hero (landing page and section pages): .tcc-hero plus a
     photo modifier (--landing, --web-design, --home-tuition,
     --training, --areas).
   - Compact hero (individual tuition, training and area pages):
     .tcc-hero .tcc-hero--compact, optional .tcc-hero__badge photo.
   Photo modifiers set background-image, --hero-pos-mobile (phones; a
   bigger first value shows more of the photo's right-hand side) and
   --hero-pos (768px up). On phones the text is limited to
   --hero-text-width and a gradient keeps it readable over the photo.
   Larger sizes: 768px, 1200px and 1800px blocks ("SHARED HERO"). */
.tcc-hero {
	--hero-text-width: 70%;
	--hero-pos-mobile: 50% 50%;
	--hero-pos: 50% 50%;
	position: relative;
	display: flex;
	align-items: center;
	/* Phones: fill the screen below the header (and the sub-menu bar on
	   pages that have one) rather than 95% of the whole screen, which
	   pushed the hero past the bottom edge. --total-nav-height is set by
	   main.js; svh ignores the browser's own toolbars on phones, with vh
	   as the fallback for older browsers. */
	min-height: calc(100vh - var(--total-nav-height, 126px));
	min-height: calc(100svh - var(--total-nav-height, 126px));
	padding: 5rem 3rem;
	background-color: var(--off-black); /* shows until the photo loads */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: var(--hero-pos-mobile);
	color: var(--white);
}

/* Readability gradient on phones (switched off from 768px up). */
.tcc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

/* ---- Per-page settings ---- */
.tcc-hero--landing {
	background-image: url(images/business-communication.avif);
	--hero-pos-mobile: 55% 50%; /* the woman on the right of a phone screen */
	--hero-pos: 50% 50%;
}

/* The code in stylised-code.avif sits on the right of the photo. On
   phones 35% brings the start of it into the right-hand side of the
   screen; from 768px up 0% keeps it as far from the text as possible. */
.tcc-hero--web-design {
	background-image: url(images/stylised-code-sm.avif); /* phone crop; full photo from 768px up */
	--hero-pos-mobile: 50% 50%;
	--hero-pos: 0% 50%;
}

/* Section hubs. Phone positions are a starting point: tune in dev
   tools. Home Tuition swaps to the full-size photo from 1800px up. */
.tcc-hero--home-tuition {
	background-image: url(images/home-tuition-tutor-and-student-sm.avif);
	--hero-pos-mobile: 60% 50%;
}

.tcc-hero--training {
	background-image: url(images/it-training-sm.avif); /* phone crop; full photo from 768px up */
	--hero-pos-mobile: 50% 50%;
}

.tcc-hero--areas {
	background-image: url(images/saltburn-sm.avif); /* phone crop; full photo from 768px up */
	--hero-pos-mobile: 50% 50%;
}

/* PC & Phone Repairs hub. The photo is mirrored so the dark PC case sits
   behind the text on the left. On phones 15% keeps the case and the
   screwdriver in view; from 768px up a soft left-hand shade keeps
   the white text readable over the bright window (see the 768px block). */
.tcc-hero--repairs {
	background-image: url(images/pc-phone-repairs-hero-sm.avif); /* phone crop; full photo from 768px up */
	--hero-pos-mobile: 48% 50%;
}

/* ---- Content ---- */
.tcc-hero__content {
	position: relative;
	z-index: 1; /* above the gradient */
	width: 100%;
}

/* Eyebrow, headline and deck. The button and the rating sit outside
   this wrapper, so they can use the full width on phones. */
.tcc-hero__text {
	max-width: var(--hero-text-width);
}

.tcc-hero__eyebrow {
	margin: 0 0 1rem;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--white);
}

/* No <br> tags needed: max-width: 12em wraps the headline at roughly
   20 characters a line at every size (3 lines on desktop for both
   current headlines). Raise it for longer lines, lower it for shorter. */
.tcc-hero__title {
	max-width: 12em;
	margin: 0 0 1.5rem;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--white);
}

.tcc-hero__deck {
	max-width: 40em;
	margin: 0;
	font-family: 'Open Sans', 'Segoe UI', sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--white);
}

/* Key facts (price, levels, area) as small badges under the deck.
   Stacked on phones, one wrapping row from 768px up. The price badge
   is filled tawny so it stands out. */
.tcc-hero__facts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.tcc-hero__fact {
	padding: 0.4em 1em;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.35);
	font-family: 'Open Sans', 'Segoe UI', sans-serif;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--white);
}

/* Price pill: outlined in orange with white text, on the same dark
   background as the other pills, so it stands out without looking like
   a second button next to the orange call to action. */
.tcc-hero__fact--price {
	border: 2px solid var(--tawny);
	padding: calc(0.4em - 1px) calc(1em - 1px); /* 1px less than the other pills, so the thicker border doesn't make this one taller */
	color: var(--white);
}

.tcc-hero__cta {
	margin-top: 3rem;
}

/* The shared .oval-button never wraps and, from 1800px up, has a fixed
   224px width. Here the text may wrap if a phone is too narrow for it
   on one line, and the button sizes to its text at every width. */
.tcc-hero__cta a {
	width: auto;
	min-width: 0;
	white-space: normal;
	font-size: 1.6rem;
}

/* Star rating: fixed size rather than filling its container (the
   global img rule would otherwise stretch it). */
.tcc-hero__rating {
	display: block;
	width: fit-content;
	margin-top: 3rem;
}

.tcc-hero__rating img {
	display: block;
	width: 30rem;
	max-width: 100%;
	border-radius: 0;
}

/* ---- Compact variant ----
   Solid blue, no gradient, only as tall as its content. Two-class
   selector so it beats the plain .tcc-hero rules at 768px and 1800px.
   The badge sits below the text on phones, beside it from 768px. */
.tcc-hero.tcc-hero--compact {
	--hero-text-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	min-height: 0;
	padding-top: 6rem;
	padding-bottom: 6rem;
	background-color: var(--tccbluedarkest);
}

.tcc-hero--compact::before {
	display: none;
}

/* Longer headlines here, so a wider wrap point (2 lines on desktop). */
.tcc-hero--compact .tcc-hero__title {
	max-width: 18em;
}

/* The tier-3 and hub pages use five-star-rating-badge.svg, which is
   drawn larger than the -alt badge on the landing and Web Design pages,
   so it keeps its old size: half the screen width, capped at 35rem.
   Matched by file name, so it applies to whichever hero uses it, and
   the attribute selector outranks the 768px and 1800px rating sizes. */
.tcc-hero__rating img[src*="five-star-rating-badge.svg"] {
	width: min(35rem, 50vw);
}

/* Optional circular photo (area pages). */
.tcc-hero__badge {
	position: relative;
	z-index: 1;
	align-self: center;
	width: 50%;
	max-width: 28rem;
	margin-top: 4rem;
}

.tcc-hero__badge img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--white);
}
/* ============ END SHARED HERO ============ */

.mywidth{
	width:100%
}

.card-icon{
		width: 100px;
		color: #d45500;
		padding-top: 0.25em;
}

form {
	font-size: 1.6rem;
	color: var(--white);
}

.light-text {
	color: #f3f3f3;
	font-weight: 100;
}

.col-white {
	color: #ececec;
}

.pure-white {
	color:#fff;
}

.col,
.wrapper .align-items-center,
.d-block,
.w-100, .row {
	margin: 0px;
	padding: 0px;
}

.bg-carousel {
	position: relative;
	overflow: hidden;
	height: 35vh;
}

.bg-carousel-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: carousel-crossfade 13.5s infinite;
}

/* Each photo sits in a <picture> (phones get the -sm crop), so the
   delays count the <picture> wrappers rather than the images. */
.bg-carousel picture:nth-child(1) .bg-carousel-img { animation-delay: 0s; }
.bg-carousel picture:nth-child(2) .bg-carousel-img { animation-delay: 4.5s; }
.bg-carousel picture:nth-child(3) .bg-carousel-img { animation-delay: 9s; }

.bg-carousel h2 {
	position: relative;
	z-index: 1;
}

@keyframes carousel-crossfade {
	0%     { opacity: 0; }
	11.1%  { opacity: 1; }
	33.3%  { opacity: 1; }
	44.4%  { opacity: 0; }
	100%   { opacity: 0; }
}

.banner {
	background-color: var(--tccbluedark);
	min-height: 5vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	color: var(--white);
	padding: 0 2em;
}

.disappear {
    display: none;
}

.mybox {
  display: flex;
  align-items: center;
}

.container svg {
  margin-left: auto;
}
.small-icons {
	width: 24px;
	padding: 0.5em 0.5em;
}

.text-bold {
	font-family: 'Open Sans', 'Segoe UI', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	font-style: normal;
	color: var(--white);
	text-decoration: none;
}

a>span {
	padding-right: 0.4em;
}

.right span {
	align-content: center;
}

.right a .icon {
	transition: transform 0.3s ease, fill 0.3s ease;
}

.right a:hover .icon {
	transform: translateY(-7px);
	fill: var(--tawny);
}

.links-container {
	background-color: #124258;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100vh;
	position: fixed;
	top: 0;
	right: -100%;
	z-index: 999999 !important;
	width: 270px;
	box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
	transition: 0.75s ease-out;
	padding-right: 3em;
	padding-left: 0;
}

nav {
	position: relative;
	height: auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0;
}

nav.template-menu{
	justify-content:flex-start;
}

li>strong>a {
	text-decoration: none;
	color: var(--gunmetal);
}

.dropdown {
	position: relative;
	overflow: visible;
}

.menu-arrow {
	width: 1.5em;
	margin-left: 0em;
	transition: transform 0.2s ease;
	fill: white;
	vertical-align: middle;
	display: inline-block;
	margin-bottom: 2px;
}

#subNav {
	position: fixed;
	top: var(--topnav-height, 127px);
	z-index: 9;
	background: var(--off-black);
	width: 100%;
	transform: translateY(-100%);
}

#subNav.subnav-play {
	animation: subnav-reveal 0.8s ease forwards;
}

@keyframes subnav-reveal {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

.template-menu {
	align-items: center;
}

.template-menu .menu a {
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: left;
	position: relative;
	padding-right: 1em;
	font-size: 0.8em;
	line-height: normal;
	text-decoration: none;
}

.template-menu .menu {
	grid-column: 0;
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
	padding: 0;
	margin: 0;
	height: 8vh;
}

nav a {
	box-sizing: border-box;
	height: auto;
	width: 100%;
	padding: 0.5em 0;
	justify-content: flex-start;
	color: var(--white);
	text-decoration: none;
	font-size: 1.7rem;
}

.dropdown-content {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	background-color: #306f8b;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
	z-index: 2000;
	min-width: 165px;
	overflow: hidden;
	left: 10px;
	top: 44px;
	border-radius: 0 0 5px 5px;
	transform: translateY(10px);
	transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0.5s linear 0.35s;
	padding-left: 0;
	margin-left: 0;
	padding-bottom: 0.8em;
}

.dropdown-content a {
	font-size: 1.2rem !important;
	padding: 10px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content li::marker {
	content: none;
}

.dropdown>a {
	display: inline-flex;
	align-items: center;
	position: relative;
	z-index: 1;
}

#arrow {
	width: 24px;
	fill: var(--white);
}

.dropdown:hover>a .menu-arrow,
.dropdown:focus-within>a .menu-arrow {
	transform: rotate(180deg);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0s linear;
	z-index: 9999;
}

.stroke-anim {
	position: relative;
}

.stroke-anim::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #d45500;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.2s ease-in-out;
	margin-top: -1px;
}

.stroke-anim:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

nav .home-link {
	margin-right: auto;
}

#sidebar-active {
	display: none;
}

.sticky {
	position: fixed;
	top: 0;
	z-index: 1000;
	background-color: var(--white);
	width: 100%;
	transition: background-color 0.3s ease;
	box-shadow: 0 2px 8px rgb(0, 0, 0, 0.15);
}

.sticky--scrolled {
	backdrop-filter: blur(2px);
	background-color: color-mix(in srgb, var(--white) 95%, transparent);
}

/* Close button inside the sidebar: original behaviour */
.close-sidebar-button {
	display: block;
	padding: 20px;
}

/* Header burger: same box and right-hand gap as the section menu
   burger, so the two sit on the same vertical centre line. */
.open-sidebar-button {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: var(--burger-box);
	height: var(--burger-box);
	padding: 0;
	margin-right: var(--burger-right);
	box-sizing: content-box;
	line-height: 0;
}

.open-sidebar-button svg,
.close-sidebar-button svg {
	display: block;
}
#sidebar-active:checked~.links-container {
	right: 0 !important;
}

#sidebar-active:checked~#overlay {
	opacity: 1;
	pointer-events: auto;
}

.wrapper.sticky {
	overflow: visible;
}

#overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 99998;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

.logo-img {
	max-width: 155px;
	padding: 0.75em;
}

.middle {
	order: 3;
}

.right {
	order: 2;
	margin-left: auto;
	display: none;
}

.menu-search {
	display: flex;
	align-items: center;
	margin-left: 0;
	margin-top: 1em;
}

.menu-search-form {
	display: flex;
	align-items: center;
	width: 100%;
}

.menu-search .search-input-wrap {
	position: relative;
	width: 100%;
	max-width: 260px;
}

.form-control {
	height: 40px;
	padding: 0 2.25rem 0 12px;
	border: 1px solid #cccccc;
	width: 100%;
	outline: none;
	font-size: 1.4rem;
}

.menu-search .search-input-wrap .form-control {
	border-radius: 50px;
}

.menu-search .search-icon-btn {
	position: absolute;
	right: 1.4rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.menu-search .search-icon {
	width: 22px;
	height: 22px;
}

.menu-search .search-input-wrap .form-control:focus {
	border-color: #d45500;
	box-shadow: 0 0 0 .25rem #f87218;
	outline: 0;
}

	

li#menu-item-197>.dropdown-content, li#menu-item-578>.dropdown-content, li#menu-item-634>.dropdown-content, li#menu-item-75>.dropdown-content {
	display: none !important;
}

.bg-round, .bg-block-grad-round {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bg-round{
	background-image:url(images/rounded-background-shape.svg);
}

.bg-block-grad-round{
	background-image:url(images/gradient-bubbles-background.svg);
}

.oval-button,
.oval-button2, .oval-button3 {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1em 2.5em;
	min-width: max-content;
	white-space: nowrap;
	border-radius: 8px;
	border: 2px solid var(--tawny);
	text-decoration: none;
	font: 400 1.5rem/1.2 "Open Sans", sans-serif;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	z-index: 0;
	overflow: hidden;
	transition: border-color 0.4s cubic-bezier(0.7, 0, 1, 1);
}

.oval-button {
	background-color: #f2610021;
	color: var(--white);
}

.oval-button2 {
	background-color: color-mix(in srgb, var(--tawnylightest) 50%, transparent);
	color: #000;
}

.oval-button3 {
	background-color: var(--tawny);
	color: var(--white);
}

.oval-button::before,
.oval-button2::before,
.oval-button3::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #050200ed;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .6s cubic-bezier(.98, 0, 0, 1);
	z-index: -1;
}

.oval-button:hover::before,
.oval-button2:hover::before,
.oval-button3:hover::before {
	transform: scaleX(1);
}

.oval-button:hover {
	border-color: var(--tawnylighter);
	color: var(--tawnylight);
}

.oval-button2:hover {
	color: #555;
}

.oval-button3:hover {
	border-color: #000;
}

.oval-button:hover,
.oval-button2:hover,
.oval-button:focus-visible,
.oval-button2:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 138, 60, .6), 0 0 10px rgba(255, 138, 60, .85), 0 0 18px rgba(255, 138, 60, .75);
}

.oval-button3:hover,
.oval-button3:focus-visible {
	box-shadow: 0 0 0 2px rgba(41, 18, 3, 0.6), 0 0 10px rgba(53, 43, 36, 0.85), 0 0 18px rgba(5, 4, 4, 0.75);
}

.parallax {
	background-image: url(images/business-consultation-background.avif);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#ht,
#network,
#web-dev,
#sm,
#bespoke {
	scroll-margin-top: 150px;
}

/* min-height rather than height, so the box grows to fit its content
   on short viewports (e.g. 1440 x 460) instead of letting the button
   spill out of the bottom. */
.jumbotron2 {
	width: 100%;
	margin: 0;
	background: linear-gradient(0deg, var(--tccbluedark) 0%, var(--black) 100%);
	color: var(--white);
	display: flex;
	flex-direction: column;
	padding: 4em 1.5em 4em;
	min-height: 45vh;
}

.jumbotron2 p {
	font-size: 1.6rem;
	font-weight: 100;
	line-height: 1.5em;
}

.bottom-block {
	margin-top: auto;
	padding-bottom: 1.5em;
}

.highlt3 {
	color: var(--tawny);
}

.block-grad {
	background: linear-gradient(0deg, var(--tccbluedarker) 0%, var(--off-black) 100%);
	color: var(--white);
}

.block-grad2 {
	background: linear-gradient(0deg, var(--off-black) 0%, var(--tccbluedarker) 100%);
	color: var(--white);
}

.breadspan {
	padding: 0 0.5em;
	color:#fff;
}

.bot-marg {
	margin-bottom: 4vh;
}

.animated {
	opacity: 0;
}

.fadein2 {
	animation: fadein2 3.5s both;
}

@keyframes fadein2 {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeintop {
	animation: fadeintop 2s both;
}

@keyframes fadeintop {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeinbot {
	animation: fadeinbot 2s both;
}

@keyframes fadeinbot {
	0% {
		opacity: 0;
		transform: translateY(400px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeinbot2 {
    animation:
        fadein 1.75s ease both,
        fadeinbot-move 1.5s cubic-bezier(0.1, 0.8, 0.2, 1) both;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeinbot-move {
    from {
        transform: translateY(50px);
    }
    to {
        transform: translateY(0);
    }
}

.fadeinright {
	animation: fadeinright 1.5s ease-out 2s both;
}

@keyframes fadeinright {
	from {
		opacity: 0;
		transform: translateX(100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeinleft {
	animation: fadeinleft 2.5s both;
}

@keyframes fadeinleft {
	0% {
		opacity: 0;
		transform: translateX(-100px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.stroke-anim2 {
	position: relative;
	z-index: 1;
}

.stroke-anim2::before,
.stroke-anim2::after {
	content: '';
	position: absolute;
	top: 0;
	width: 50.5%;
	height: 100%;
	background: linear-gradient(0deg, var(--lapis) 0%, var(--black) 100%);
	transform: scaleX(0);
	transition: transform 0.4s cubic-bezier(0.7, 0, 1, 1);
	z-index: -1;
}

.stroke-anim2::before {
	left: 0%;
	transform-origin: left;
}

.stroke-anim2::after {
	left: 50%;
	transform-origin: right;
}

.stroke-anim2.visible::before {
	transform: scaleX(1);
	transform-origin: right;
}

.stroke-anim2.visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	padding: 0;
	list-style-type: none;
}

.card {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: 7px;
	text-decoration: none;
	width: 80%;
	margin: 0 auto;
}

.card__image {
	width: 100%;
	height: auto;
}

.card__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background-color: #e8f1f5;
	transform: translateY(100%);
	transition: .2s ease-in-out;
}

.card:hover .card__overlay {
	transform: translateY(0);
	opacity: 0.9;
}

.card__header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2em;
	padding: 1.5em;
	background-color: var(--lapis);
	transform: translateY(-100%);
	transition: .2s ease-in-out;
}

.card__arc {
	width: 80px;
	height: 80px;
	position: absolute;
	bottom: 100%;
	right: 0;
	z-index: 1;
}

.card:hover .card__header {
	transform: translateY(0);
	opacity: 1;
}

.card__title {
	font-size: 1.6rem;
	font-weight: 400;
	margin: 0 0 0.3em;
	color: #e5e5f1;
	height: 1em;
}

.card__description {
	padding: .75em 1em 3em;
	margin: 0;
	color: #292929;
	font-family: Arial, Helvetica, sans-serif;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	line-height: 1.25em;
	font-size: 1.3rem;
}

footer {
	color: var(--white);
	font-size: 1.1rem;
	padding: 0 0em;
	position: relative;
	z-index: 1;
}

footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1.3rem;
}

footer li>a {
	text-decoration: none;
	color: var(--white);
	justify-content: center;
}

footer li>a:hover {
	color: var(--tawny);
}

footer li{
	text-align: left;
	margin: 0;
	padding: 0.15em;
}

.colour {
	fill: var(--tawny);
}

footer h4 {
	font-size: 1.2rem;
	color: var(--grey);
	font-weight: 600;
	padding: 1em 0em 0.5em;
}

.ft-icon {
	width: 40px;
	fill: #4d4d4d;
	padding-top: 0.25em;
}

.text-center a {
	text-decoration: none;
}

footer p {
	font-size: 1.2rem;
	color: var(--white);
}

.nav-tabs {
	padding-left: 0;
	justify-content: center;
	gap: 3px;
}

.nav-tabs .nav-link {
	border: none;
	color: var(--white);
	background-color: #035e89;
	border-radius: 0.25rem 0.25rem 0 0;
	margin: 0;
	font-size:1.2rem;
}

.nav-tabs .nav-link.active {
	background-color: #6891a3;
	color: var(--white);
	font-weight: bold;
}

.accordion-button {
	background-color: white;
	color: #292929;
	font-weight: 400;
	box-shadow: none;
	font-size: 1.4rem;

}

.accordion-button:not(.collapsed) {
	background-color: #f9f9f9;
	color: #292929;
}

.accordion-body {
	font-family:  'Segoe UI', 'Open Sans', sans-serif;
	font-size: 1.4rem;
	color: #292929;
	padding: 0.5em 2em;
}

.nav-tabs,
.tab-content,
.tab-pane,
.accordion,
.accordion-item,
.accordion-header,
.accordion-button {
	border: 0;
}

/* ============ ACCORDION: L.E.A.G.U.E DESIGN PHILOSOPHY VARIANT ============ */
/* Mobile-first: the default styles in this section are the inline
   phone accordion (below 992px). The side-by-side desktop layout is
   restored in the min-width: 992px block near the end of the file.

   MOBILE (the defaults here): inline accordion.
   main.js moves #panelWrap so it sits directly under the active row
   (inside .tcc-league-buttons) and moves the photo inside the panel's
   shell, so the open item always sits next to the button you tapped.
   Things that only make sense with that in mind:
   - The shell's padding is moved onto the panel text. A box can't be
     shorter than its own padding and the panel has to fold all the
     way to 0px tall when it closes.
   - The panel wrapper is static (in the normal flow, between rows), so
     the desktop `top` slide doesn't apply.
   - The panel and the active row share the same blue, so they read as
     one block; the shell has no radius or shadow of its own because
     .tcc-league-buttons already clips and shadows the whole card. */
.shadow-effect{
	box-shadow: 2px 2px 6px #0000009f;
}

/* Photo beside the accordion (web-design.php). Below 1400px it stacks
   full width under the accordion, where the portrait photo (2:3) is
   very tall, so it's cropped to half its height: 4:3 is the 2:3 shape
   at half the height. object-fit: cover crops evenly from top and
   bottom; change object-position (e.g. 50% 30%) to keep more of the
   top or bottom. From 1400px up it's beside the accordion again, at
   its full height (see the 1400px block). */
.tcc-league-photo {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 50%;
}
.tcc-league-accordion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	width: 100%;
}

/* On a phone the rows run straight to the card's top and bottom
   edges. If the markup puts top/bottom padding on this element with
   a Bootstrap utility class, use the lg- version of it (e.g. py-lg-3
   instead of py-3) so it only applies from 992px up. */
.tcc-league-buttons {
	background: var(--gunmetal);
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	flex-shrink: 0;
	position: relative;
	box-shadow: 2px 2px 6px #0000009f;
}

.tcc-league-highlight {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
	background: var(--tccbluedarkish);
	transition: top 0.4s ease, height 0.4s ease;
	z-index: 0;
	pointer-events: none;
}

/* Touch targets of at least 44px (5.6rem / 4.8rem here) below 992px. */
.tcc-league-item {
	width: 100%;
	background: transparent;
	border: 0;
	padding: 1rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	text-align: left;
	font-size: 1.9rem;
	font-weight: 400;
	color: var(--white);
	position: relative;
	z-index: 1;
	min-height: 5.6rem;
}

/* Thin dividers between rows and above the Great / User /
   Experiences group so it reads as one item (below 992px only).
   General-sibling (~) rather than adjacent (+), because the open
   panel sits between two rows. */
.tcc-league-item ~ .tcc-league-item,
.tcc-league-item ~ .tcc-league-gue {
	border-top: 1px solid rgba(250, 250, 250, 0.12);
}

.tcc-league-letter {
	font-weight: 700;
	color: var(--tawnylighter);
	padding-right: 0.1em;
}

/* The icon rule used to be scoped to .tcc-league-item only, so the sign
   on the "Great" row (which sits inside .tcc-league-gue-line.is-first,
   not .tcc-league-item) missed the font size, width and centring below
   and landed a couple of pixels to the right of the others. It now
   applies to both and uses a fixed-width box (rather than min-width)
   so the + and − glyphs share exactly the same centre line on every row. */
.tcc-league-item .tcc-league-icon,
.tcc-league-gue-line .tcc-league-icon {
	flex: 0 0 2rem;
	width: 2rem;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	color: var(--white);
	text-align: center;
}

.tcc-league-gue {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
}

.tcc-league-gue-line {
	padding: 1rem 2rem;
	font-size: 1.9rem;
	color: var(--white);
	display: flex;
	align-items: center;
	min-height: 4.8rem;
}

.tcc-league-gue-line.is-first {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	min-height: 5.2rem;
}

.tcc-league-gue-line.is-mid,
.tcc-league-gue-line.is-last {
	cursor: pointer;
}

.tcc-league-panel-wrap {
	position: static;
	margin: 0;
	left: var(--league-buttons-width);
	right: 0;
	top: 0;
	transition: top 0.4s ease;
}

.tcc-league-panel-shell {
	background: var(--tccbluedarkish);
	border-radius: 0;
	padding: 0;
	overflow: hidden;
	transition: height 0.3s ease;
	box-shadow: none;
}

/* Panel text: 1.6rem, deliberately a step below the 1.9rem row labels
   beside it — the same relationship as body text under a subheading.
   The second selector is there because the global `p` rules (1.4rem,
   and 1.7rem from 1800px up) would beat an inherited size if the panel
   content is wrapped in <p> tags. */
.tcc-league-panel,
.tcc-league-panel p {
	font-size: 1.6rem;
	line-height: 1.7;
}

.tcc-league-panel {
	color: var(--white);
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	padding: 0.2rem 2rem 1.6rem;
}

.tcc-league-panel.is-shown {
	display: block;
}

.tcc-league-panel.is-visible {
	opacity: 1;
}

/* Section heading, acronym subline and intro paragraph above the
   accordion. */

/* Spells out the acronym. Initials reuse the .tcc-league-letter
   markup from the sidebar, in the darker --tawny so they stay legible
   on the light page background (the sidebar's lighter orange is tuned
   for the dark blue and is too pale here). */
.tcc-league-subline {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--new-black);
	margin: 0 0 2.4rem;
}
.tcc-league-subline .tcc-league-letter {
	color: var(--tawny);
	font-weight: 700;
	padding-right: 0;
}

/* Safety net for the intro paragraph: forces everything nested inside
   it (spans, links, pasted formatting) to use the paragraph's own
   font, size, colour and spacing, so "TCC League Design philosophy"
   can't render differently from the text around it. !important is
   deliberate — the odd styling is most likely inline or comes from
   the editor, which would otherwise win. */
.tcc-league-intro * {
	font: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
}
/* ============ END ACCORDION: L.E.A.G.U.E DESIGN PHILOSOPHY VARIANT ============ */

/* ============ ACCORDION: PLUS/MINUS VARIANT ============ */
/* Add class="tcc-accordion-plusminus" to the accordion wrapper div to get
   the blue-gradient buttons with a +/- indicator instead of Bootstrap's
   default chevron. Used on the Maths Tuition and Home Tuition Hub FAQ /
   subject accordions — previously duplicated per-page as inline <style>
   blocks keyed to IDs #accordionLevel22 / #accordionLevel33, which is
   why the two pages had drifted out of sync. Keep the unique ids on
   each accordion for Bootstrap's data-bs-parent targeting; this class
   only drives the visual styling and can be reused on any page.
   The 1200px-up adjustments live near the end of the file. */

.tcc-accordion-plusminus {
	width: 100% !important;
	border: 0;
	background: 0 0;
}

.tcc-accordion-plusminus .accordion-item {
	overflow: hidden;
}

.tcc-accordion-plusminus .accordion-button {
	background-image: linear-gradient(90deg, #2d8ab6 20%, #02334d 90%) !important;
	background-color: transparent !important;
	border-radius: 8px !important;
	color: var(--white);
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1.4;
	min-height: 3.5em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5em .6em;
	box-shadow: none !important;
	width: 100%;
	white-space: normal;
}

.tcc-accordion-plusminus .accordion-button:not(.collapsed) {
	background-image: linear-gradient(90deg, #2d8ab6 20%, var(--tccbluedark) 90%) !important;
	background-color: transparent !important;
	color: var(--white);
	box-shadow: none !important;
}

.tcc-accordion-plusminus .accordion-button::after {
	content: "+";
	font-weight: 500;
	font-size: 1.4em;
	line-height: 1;
	background-image: none !important;
	transform: none !important;
	color: #f8dcdcff;
	opacity: 1;
	padding: 0 1em;
	display: flex;
	align-items: center;
}

.tcc-accordion-plusminus .accordion-button:not(.collapsed)::after {
	content: "−";
}

.tcc-accordion-plusminus .accordion-button:focus {
	box-shadow: 0 0 0 .2rem #77a3b8ff !important;
}

.tcc-accordion-plusminus .accordion-body {
	background: #f3f3f3;
	padding: 1rem 1.25rem;
	margin-top: .5rem;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.6;
	border-radius: 8px;
}
/* ============ END ACCORDION: PLUS/MINUS VARIANT ============ */

#off365 h4,
#off365 p {
	display: inline;
	margin: 0;
}

#off365 {
	text-align: left;
}

.large-icons {
	width: 60px;
	height: 60px;
	padding: 0.75em;
	fill: var(--white);
	stroke: var(--white);
}

.form-group {
	padding: 0.25em;
}

form label {
	padding: 0.5em;
	font-weight: 500;
}

.blue-eyebrow {
	font-family: 'Segoe UI', 'Open Sans';
	color: var(--tccbluedark);
	font-size: 1.7rem;
	font-weight: 700;
	display: inline;
}

.block-grad .blue-eyebrow, .block-grad2 .blue-eyebrow, .bg-block-grad-round .blue-eyebrow,
.block-grad h2, .block-grad2 h2, .block-grad h3, .block-grad2 h3 {
	color: var(--white);
	font-weight:700;
}

.circle-tick {
    flex: 0 0 1.25em;
    align-self: flex-start; /* explicit — don't rely on stretch's fallback behavior */
    width: 1.25em;
    height: 1.25em;
    background: url("images/circle-tick-icon.svg") center / contain no-repeat;
    margin-right: 1em;
    margin-top: calc((1lh - 1.25em) / 2); /* centers against line 1 only, however many lines follow */
}

/* Tick-list text matches the paragraph size around it: 1.4rem here,
   1.7rem from 1800px up (see the 1800px block), the same as p. */
.tcc-tick-list-centered li {
	padding-left: 2.4em;
	font-size:1.4rem;
}

.tcc-tick-list-centered .circle-tick {
	float: left;
	margin-left: -2.4em;
	margin-top: 0.3em;
}
.circle-tick + strong {
    letter-spacing: 0.025em;
}

/* Checklist beside the "How We Help Organisations Grow" cards (Custom
   Page). The global strong rule switches these to Roboto; this puts
   them back in Segoe UI semibold, white, as in the original design.
   Segoe UI is a Windows font, so Macs and phones get Open Sans. */
.tcc-benefits-cta strong {
	font-family: 'Segoe UI', 'Open Sans', sans-serif;
	font-weight: 600;
	color: var(--white);
}

.tcc-list{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.361 36.634'%3E%3Cg transform='translate(116.262 -1231.741)'%3E%3Cpath style='fill:%23035389' d='M-115.924 1232.185h17.877v17.877h-17.877z'/%3E%3Cpath style='fill:%23d45500' d='M-106.993 1241.1h17.877v17.877h-17.877z'/%3E%3Cpath style='fill:%23000' d='M-98.085 1250.093h17.88v17.877h-17.88Z'/%3E%3Cpath style='fill:%23fff;fill-opacity:.745038' d='m-107.401 1250.027 3.409 9.298'/%3E%3Cpath style='fill:none;' d='M-107.17 1249.964v9.027h8.9v9.067h18.053v-18.2h-8.713v-8.92H-98v-8.88h-17.946v17.843z'/%3E%3C/g%3E%3C/svg%3E");
	display: inline-block;
	width: 2.75em;
	height: 2.75em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 1em;
	vertical-align: top;
	margin-bottom:0.5em;
}

.mymap2 {
	width: 100%;
	height: 45vh;
	border: 0;
}

p a {
	text-decoration: none;
	color: var(--white);
}

/* Scrolling atlas (Areas We Cover hub). The map repeats sideways at
   the height of the box, so one copy of it is (box height x the map's
   width-to-height ratio) wide. The animation moves the background by
   exactly that amount, so the end of each loop lines up with the start
   and there's no jump. (It used to move by 100vw, which almost never
   matched one copy of the map, so it snapped back every loop.)
   --atlas-h: the box height (changed at 361px and 1800px below).
   --atlas-ratio: world.svg's width divided by its height. Open the file
   and read its viewBox="0 0 W H": the ratio is W / H. If the jump is
   still there, this number is the one to correct. */
.viewport {
	--atlas-h: 35vh;
	--atlas-ratio: 2;
	position: relative;
	height: var(--atlas-h);
	overflow: hidden;
	background: #fafafa;
}

.scroller {
	position: absolute;
	inset: 0;
	background-image: url(images/world.svg);
	background-repeat: repeat-x;
	background-position: 0 50%;
	background-size: auto 100%;
	animation: pan var(--speed2) linear infinite;
	will-change: background-position;
}

@keyframes pan {
	0% {
		background-position: 0 50%;
	}

	100% {
		background-position: calc(var(--atlas-h) * var(--atlas-ratio)) 50%;
	}
}

.cloud {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--cloud-width2);
	height: 100%;
	pointer-events: none;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.0) 30%, #fafafa 75%);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: right;
}

.ovr {
	font-family:'Segoe UI', Roboto, 'open sans';
	margin-right: 1em;
	line-height: 1;
	font-weight: 700;
	font-size: clamp(0.5rem, 2.2vw + 1rem, 3rem);
	color: var(--tccbluedarker);
	text-shadow: 0 2px 8px rgba(24, 124, 238, 0.082);
}

.ovr span {
	display: block;
}

.fn1 {
	font-size: 1.2rem;
}
/* Base rules */
.section-heading {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.2;
	margin-bottom: 1rem;
	font-family: Roboto, 'Open Sans', sans-serif;
}

/* Scoped override for .tcc-list specifically when it's used as the
   icon inside .section-heading (single.php's h2/h3 wrapping). The
   base .tcc-list rule (further down this file) is unchanged and
   still correct for its other, non-flex usages (breadcrumbs, etc.)
   — this only adjusts behavior that .section-heading's flex layout
   would otherwise break: vertical-align does nothing on a flex
   child, so margin-top does the centering instead (in em, so it
   scales correctly whether this lands in an h2 or h3, since
   .tcc-list itself sizes at 2.75em relative to its heading's own
   font-size); margin-right is zeroed since spacing between the icon
   and heading text is already handled by .section-heading's own
   flex gap and stacking both would double up spacing. */
.section-heading .tcc-list {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: calc((1lh - 2.5rem) / 2);
	margin-right: 0;
}

.white-section .section-heading {
	color: #0c0c0c;
	font-family: Roboto, 'Open Sans', sans-serif;
}

.parallax h2,
.jumbotron2 h2 {
	font-family:'Segoe UI', Roboto, sans-serif;
	color: var(--white);
	font-weight: 500 !important;
}

.border-light {
	border: 1px solid var(--white);
	border-radius: 1%;
}

.new-h2 {
	color: var(--white);
}

#navProgress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 5px;
	width: 0%;
	background: var(--tawny);
	transition: width 0.1s linear;
	z-index: 10000;
	opacity: 0.93;
}

#subNavProgress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 5px;
	width: 0%;
	background: var(--tawny);
	transition: width 0.1s linear;
	z-index: 1;
	display: none;
	opacity: 0.93;
}

.w-md-75 {
	width: 35% !important;
}

.bg-white>h3 {
	color: var(--tccbluedark);
	font-weight: 500;
}

.center {
	margin: 0 auto;
}

.bord {
	border: 1px solid var(--white);
	border-radius: 4px;
}

.bord:hover, 
.bord:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px rgba(255, 255, 255, .85), 0 0 18px rgba(255, 255, 255, .75);
	filter: drop-shadow(0 0 2px #fff);
}

/* ============ COVERFLOW GALLERY ============ */
/* Coverflow gallery — namespaced with .coverflow- prefix to avoid
   colliding with tcctheme's existing generic .card, .arrow and
   .stage-style rules in style.css. Enqueue this only on the
   page/template that uses the coverflow, not sitewide.

   Layout of the stage: the cards and their reflection centred, the
   project caption underneath the cards by default, and the hint under
   the cards. From 1600px wide up (see the min-width: 1600px block near
   the end of the file) the caption moves to the right, between the
   cards and the right arrow, where there's room beside them. The
   caption and the lightbox are created by main.js, so no template
   changes are needed. */
.coverflow-stage {
	--cf-card-w: 363px;
	--cf-card-h: 204px;
	/* How far the caption's left edge sits from the centre of the stage
	   (used from 1600px up). The outermost fanned card on the right ends
	   about 33.5rem from the centre, so 36rem leaves a small gap. Reduce
	   it to bring the text closer still (it will start to overlap the
	   outer cards), increase it to move the text further away. */
	--cf-caption-offset: 46rem;
	position: relative;
	/* Below 1600px the stage is taller and the caption sits below the
	   reflection, because the fanned-out cards reach roughly 40rem
	   either side of the centre and a side caption would overlap them. */
	height: 60vh;
	min-height: 56rem; /* keeps room for the cards, reflection and caption on short screens */
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1200px;
	perspective-origin: 50% 40%;
	background: #000000f9;
	overflow: hidden;
	border:solid 1px #9a9a9a;
	/* Shifts the cards up so the reflection and caption have room below
	   and clear the hint text. Increase to move the cards higher, reduce
	   to move them lower. */
	padding-bottom: 20rem;
}

.coverflow-track {
	position: relative;
	width: var(--cf-card-w);
	height: var(--cf-card-h);
	transform-style: preserve-3d;
}

/* No overflow: hidden here — it clipped the reflection below the card.
   The rounded corners still apply to the card's background without it,
   and the label (.coverflow-art) sits inside the card at inset: 0. */
.coverflow-card {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--cf-card-w);
	height: var(--cf-card-h);
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
	transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter 0.5s ease, z-index 0s;
	transform-style: preserve-3d;
	cursor: pointer;
}

/* The centre card opens the lightbox when clicked (main.js adds
   is-zoomable once its image has loaded). */
.coverflow-card.is-current.is-zoomable {
	cursor: zoom-in;
}

/* Reflection: a mirrored copy of the card's background, sitting 4px
   below the card. It's flipped around its own centre, and is the same
   height as the card so the image isn't re-cropped. Because the flip
   also flips the mask, the gradient runs "to top". It fades out within
   the first 35% of its height and is kept faint, so it reads as a
   subtle floor reflection and leaves room for the caption below. */
.coverflow-card::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: scaleY(-1);
	transform-origin: center;
	-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 35%);
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 35%);
	opacity: 0.6;
	pointer-events: none;
}

.coverflow-card .coverflow-art {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-align: center;
	padding: 12px;
	-webkit-mask-image: none;
}

/* ---- Caption for the centre card (built by main.js) ----
   By default it sits underneath the cards, centred, below the
   reflection. It fades out, swaps its text and fades back in whenever
   the centre card changes. From 1600px wide up it moves to the right,
   vertically centred, just beyond the fanned cards and positioned from
   the centre of the stage (not its right edge), so it stays the same
   distance from the cards on any screen width, with a thin divider on
   its left (see the media query near the end of the file). */
.coverflow-caption {
	position: absolute;
	top: auto;
	right: auto;
	left: 50%;
	bottom: 5.6rem;
	transform: translateX(-50%);
	width: min(64rem, 90%);
	padding-left: 0;
	border-left: 0;
	text-align: center;
	z-index: 200;
	transition: opacity 0.2s ease;
}

.coverflow-caption.is-changing {
	opacity: 0;
}

.coverflow-caption-type {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tawnylighter);
}

.coverflow-caption-title {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--white);
}

.coverflow-caption-desc {
	margin: 0.6rem 0 0;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(250, 250, 250, 0.78);
}

/* Links sit outside the <p> tags on purpose, so the global "p a" rule
   (white, no decoration) can't override their colour. */
.coverflow-caption-actions {
	margin-top: 1.2rem;
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.coverflow-caption-link {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--tawnylighter);
	text-decoration: none;
	cursor: pointer;
}

.coverflow-caption-link:hover,
.coverflow-caption-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.coverflow-caption-link:focus-visible {
	outline: 2px solid #fafafa;
	outline-offset: 3px;
}

.coverflow-hint {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	letter-spacing: 0.03em;
}

/* The arrows line up with the centre of the cards, not the centre of
   the stage. The stage's padding-bottom (20rem below 1600px) pushes the
   cards up by half that amount, so the arrows are raised by the same
   half (10rem). If you change the stage's padding-bottom, change the
   10rem here to half the new value. From 1600px up the arrows go back
   to the middle of the stage (see the min-width: 1600px block). */
.coverflow-arrow {
	position: absolute;
	top: calc(50% - 10rem);
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: #ffffff0f;
	font-size: 20px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 999;
	transition: background 0.2s ease;
}

.coverflow-arrow:hover {
	background: rgba(255, 255, 255, 0.14);
}

.coverflow-arrow:focus-visible {
	outline: 2px solid #fafafa;
	outline-offset: 2px;
}

.coverflow-arrow img {
	width: 27px;
	height: auto;
	display: block;
	pointer-events: none;
}

/* The buttons carry the classes "left" and "right", which the header
   also uses (.left / .right, including padding-right: 2em and
   justify-content: flex-end from 1800px up). Those rules now come
   later in the file, so these two-class selectors reset everything
   they set — two classes beat one regardless of order, which keeps
   the arrow icon centred in its circle at every width. */
.coverflow-arrow.left,
.coverflow-arrow.right {
	flex: none;
	order: 0;
	margin: 0;
	padding: 0;
	gap: 0;
	justify-content: center;
	font-size: 20px;
}

.coverflow-arrow.left {
	left: 24px;
}

.coverflow-arrow.right {
	right: 24px;
}

.coverflow-arrow.right img {
	transform: scaleX(-1);
}

/* ---- Lightbox (built by main.js, added to the end of <body>) ----
   Shows the centre card's screenshot at full size with its caption.
   Closes with the × button, the Escape key or a click on the dark
   backdrop; the left/right arrow keys step through the projects.
   z-index sits above the site's mobile menu (999999). */
.coverflow-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 2rem 4rem;
	background: rgba(0, 0, 0, 0.9);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.coverflow-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.coverflow-lightbox-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	max-width: min(140rem, 94vw);
}

/* Overrides the global img rule (width: 100%; border-radius: 10px) so
   the screenshot keeps its own proportions and fits the screen. */
.coverflow-lightbox-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 72vh;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.coverflow-lightbox-text {
	text-align: center;
	max-width: 70rem;
}

.coverflow-lightbox-close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 4.8rem;
	height: 4.8rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
	font-size: 2.8rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.coverflow-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.coverflow-lightbox-close:focus-visible {
	outline: 2px solid #fafafa;
	outline-offset: 2px;
}
/* ============ END COVERFLOW GALLERY ============ */

/* Stat cards (landing page and Web Design page). Layout comes from
   Bootstrap columns in the markup: col-12 col-md-6 col-xxl-4 on a
   justify-content-center row, so one per row below 768px, two plus one
   centred from 768px, three in a row from 1400px. */
.tcc-stat-card {
	background-color: var(--tccbluedark);
	border-radius: 10px;
	padding: 2.4rem 2rem;
	max-width:320px;
}

.tcc-stat-number {
	font-size: 4.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--tawnylighterstill);
	margin: 0 0 0.5rem;
}

.tcc-stat-deck {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--white);
	margin: 0 0 1.2rem;
}

.tcc-stat-attribution {
	border-left: 2px solid var(--tawny);
	padding-left: 1rem;
}

.tcc-stat-brand {
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 0.2rem;
}

.tcc-stat-tag {
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--grey);
	margin: 0;
}

/* ============ HERO APPROACH CARDS ============ */
/* Extras for the three "Sample Hero Sections" cards
   on the Web Design page. The cards themselves reuse the .tcc-stat-card /
   .tcc-stat-number / .tcc-stat-deck / .tcc-stat-attribution rules above,
   so only the differences live here.
   Everything on the cards is simply there; main.js only counts the digit
   (look for the block marked "CHANGE THE TIMINGS HERE"). */

/* Size of the words after the digit ("Templates", "First Look", ...).
   The digit itself uses .tcc-stat-number's 4.4rem, exactly like "27+".
   To make the words the same size as the digit, change this to 4.4rem
   (they will then wrap to a second line on narrow cards). */
.tcc-hero-cards {
	--tcc-hero-word-size: 2rem;
}

/* Digit and words sit on one baseline. */
.tcc-hero-cards .tcc-stat-number {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.8rem;
}

.tcc-hero-digit {
	font-variant-numeric: tabular-nums; /* every digit the same width, so no wobble while counting */
}

.tcc-hero-word {
	font-size: var(--tcc-hero-word-size);
}

/* The sentence beside the orange rule. */
.tcc-hero-rule-text {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--white);
	margin: 0;
}

/* Text for screen readers only: they read the finished hook ("0 Templates")
   instead of hearing every number while it counts. */
.tcc-hero-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* ============ END HERO APPROACH CARDS ============ */

/* =====================================================================
   MEDIA QUERIES — all min-width (mobile-first), in ascending order.
   ===================================================================== */

@media(min-width: 361px) {

	.w-md-75 {
		width: 25% !important;
	}
	.card__title {
		font-size: 1.3rem;
	}

	.w-50 {
		width: 50% !important;
	}

	.nav-tabs {
		padding-left: 10px;
		justify-content: left;
	}

	.viewport {
		--atlas-h: 55vh;
	}

}

/* ============ ACCORDION: TWO-COLUMN LAYOUT ============ */
/* Wrap the output of tcc_render_faq_group() in
   <div class="tcc-faq-2col"> ... </div> to lay ONE accordion out in two
   columns from tablet width up (single column below that) -- but only
   when it has 5 or more items. With 4 or fewer it stays a normal single
   column, so the wrapper is safe to leave in place if items are removed.
   To change the threshold, change the 5 in nth-child(5) to N.

   Items fill left to right, then down (1|2, 3|4, ...). It stays a single
   Bootstrap accordion, so data-bs-parent still keeps only one item open
   across both columns. align-items:start stops the neighbouring item
   stretching when one opens. Uses :has(), supported in all current
   browsers; older ones simply get the single column. No PHP changes
   needed. */

@media (min-width: 768px) {

	/* Paragraphs with w-75 go back to 75% from 768px up. */
	:where(p).w-75 {
		width: 75% !important;
	}

.card-height {
  min-height: 350px;
}

	.text-bold {
	font-size: 1.4rem;
	font-weight: 600;
}

.small-icons {
	padding: 0.5em 0.25em;
}

	.block-grad {
		min-height: 68vh;
	}

	.card__title {
		font-size: 1.45rem;
	}

	.card__description {
		font-size: 1.05rem;
	}

	.logo-img {
		max-width: 175px;
	}

	h4 {
		font-size: 1.9rem;
		font-weight: 300;
		text-align: left;
		padding-top: 0.75em;
		padding-bottom: 0.4em;
	}

	

	/* SHARED HERO (.tcc-hero) — 768px up: fixed text width instead of
	   the phone percentage, the desktop photo position, no gradient. */
	.tcc-hero {
		--hero-text-width: 60rem;
		min-height: 77vh;
		background-position: var(--hero-pos);
	}

	.tcc-hero::before {
		display: none;
	}

	/* Full-size hero photos from 768px up (phones use the -sm crops) */
	.tcc-hero--web-design {
		background-image: url(images/stylised-code.avif);
	}

	.tcc-hero--training {
		background-image: url(images/it-training.avif);
	}

	.tcc-hero--areas {
		background-image: url(images/saltburn.avif);
	}

	.tcc-hero--repairs {
		background-image: url(images/pc-phone-repairs-hero.avif);
	}

	/* PC & Phone Repairs: keeps a lighter shade behind the text, as the
	   right half of its photo is bright. */
	.tcc-hero.tcc-hero--repairs::before {
		display: block;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 70%);
	}

	.tcc-hero__eyebrow {
		font-size: 2rem;
	}

	.tcc-hero__title {
		font-size: 3.75rem;
	}

	.tcc-hero__deck {
		font-size: 2.2rem;
	}

	.tcc-hero__facts {
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 2.5rem;
	}

	.tcc-hero__fact {
		font-size: 1.5rem;
	}

	.tcc-hero__cta {
		margin-top: 4rem;
	}

	.tcc-hero__rating img {
		width: 36rem;
	}

	/* Compact: badge follows the text with a 6rem gap, not at the far edge. */
	.tcc-hero.tcc-hero--compact {
		flex-direction: row;
		align-items: center;
		gap: 6rem;
		padding-top: 8rem;
		padding-bottom: 8rem;
	}

	.tcc-hero--compact .tcc-hero__content {
		flex: 0 1 100rem;
		width: auto;
		min-width: 0;
	}

	.tcc-hero__badge {
		flex: 0 0 auto;
		width: clamp(18rem, 22vw, 30rem);
		max-width: none;
		margin-top: 0;
	}
}

/* ============ RESPONSIVE WIDTH HELPERS — 992px UP ============ */
/* Responsive width helpers Bootstrap 5 doesn't ship. Put the
   small-screen width on the element as a normal class and add one of
   these for 992px up, e.g. class="w-75 w-lg-50".
   .w-lg-75: text blocks narrow to 75% from 992px up (e.g. front-page
   intro paragraphs).
   .w-lg-50: 50% from 992px up (e.g. the Model Hero Sections intro). */
@media (min-width: 992px) {
	.tcc-card-clear {
		margin-top: 0;
	}

	.w-lg-75 {
		width: 75% !important;
	}

	.w-lg-50 {
		width: 50% !important;
	}

	/* Experience section (web-design.php): text and collage side by
	   side from 992px up, with the second photo overlapping the first
	   as before. Below 992px they're stacked and interleaved (see the
	   EXPERIENCE SECTION block in the base styles). */
	.tcc-exp {
		flex-direction: row;
	}

	.tcc-exp-text,
	.tcc-exp-media,
	.tcc-exp .image-collage {
		display: block;
	}

	.tcc-exp .collage-img-1 {
		position: relative;
		width: 50%;
		margin: 0;
	}

	.tcc-exp .collage-img-2 {
		position: absolute;
		width: 65%;
		margin: 0;
	}

	.tcc-exp-card {
		width: 25%;
	}
}

/* ============ END RESPONSIVE WIDTH HELPERS ============ */

/* ============ RESPONSIVE WIDTH HELPERS — 1200px UP ============ */
/* Same idea as the 992px helpers above, for 1200px up. Leave the
   element full width below 1200px and add this class, e.g.
   class="w-xl-75".
   .w-xl-75: 75% from 1200px up (e.g. the "What Our Customers Say"
   intro paragraph, to keep lines at roughly 80 characters). */
@media (min-width: 1200px) {
	.w-xl-75 {
		width: 75% !important;
	}
}
/* ============ END RESPONSIVE WIDTH HELPERS — 1200px UP ============ */

/* ============ ACCORDION: PLUS/MINUS VARIANT — 1200px UP ============ */
@media(min-width:1200px) {
	.tcc-accordion-plusminus .accordion-button {
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1.1;
		min-height: 3.5em;
		display: flex;
		align-items: center;
		padding: .5em 1.2em;
	}

	.tcc-accordion-plusminus .accordion-button:not(.collapsed) {
		background-color: transparent !important;
		box-shadow: none !important;
	}

	.tcc-accordion-plusminus .accordion-button::after {
		margin-left: .5em;
		margin-right: 1.3em;
	}
}
/* ============ END ACCORDION: PLUS/MINUS VARIANT — 1200px UP ============ */

/* ============ SHARED HERO (.tcc-hero) — 1200px UP ============ */
/* Wider side padding on laptops and desktops, so the text sits in from
   the edge as before. Mobile and tablet keep the 3rem from the base rule. */
@media (min-width: 1200px) {
	.tcc-hero {
		padding-inline: 6%;
	}
}
/* ============ END SHARED HERO — 1200px UP ============ */

@media(min-width: 1352px) {
	.disappear {
    	display:inline;
	}

	.scrolltotop {
		width: 60px;
	}	

	.cu {
		min-height: 85vh;
	}

	.oval-button {
		padding: 1em 2.5em;
	}

	.cards>li {
		margin-bottom: 2em;
	}

}

@media(min-width: 1400px) {
	.tcc-league-photo {
		aspect-ratio: auto;
	}

	.tcc-parent-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 6rem;
		padding: 3rem 0;
	}

	/* L.E.A.G.U.E accordion: side-by-side desktop layout from 1400px up.
	   Below 1400px the inline accordion (the default styles) is used. */
	.tcc-league-accordion {
		flex-direction: row;
	}

	.tcc-league-buttons {
		width: var(--league-buttons-width);
	}

	.tcc-league-item {
		min-height: auto;
	}

	.tcc-league-gue-line {
		display: block;
		align-items: normal;
		min-height: auto;
	}

	.tcc-league-gue-line.is-first {
		min-height: auto;
	}

	.tcc-league-item ~ .tcc-league-item,
	.tcc-league-item ~ .tcc-league-gue {
		border-top: none;
	}

	.tcc-league-panel-wrap {
		position: absolute;
	}

	.tcc-league-panel-shell {
		border-radius: 0 10px 10px 0;
		padding: 2.4rem 2.8rem;
		box-shadow: 2px 2px 6px #0000009f;
	}

	.tcc-league-panel {
		padding: 0;
	}


	/* Responsive width helper, same idea as .w-lg-75 and .w-xl-75:
	   75% from 1400px up, full width below (e.g. the "On-Site or
	   Remote Training" intro on the Training hub). */
	.w-xxl-75 {
		width: 75% !important;
	}
}

/* ===================================================================
   PRICING TABLE — 1440px UP: desktop 3-column card table.
   Reverses the sticky-label / scrolling-cards layout that the pricing
   section's default (mobile-first) styles set up.
   =================================================================== */
@media (min-width: 1440px) {

	.tcc-faq-2col .accordion:has(> .accordion-item:nth-child(5)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 3rem;
		align-items: start;
	}
	
	.pricing-scroll {
		overflow-x: visible;
		-webkit-overflow-scrolling: auto;
		min-width: fit-content;
		padding-left: 0;
		padding-top: 0; /* no clipping from here up, so no badge room needed */
	}

	.pricing-label-header {
		margin-top: 0;
	}

	/* Label column back in normal flex flow beside the cards */
	.pricing-labels {
		position: static;
		top: auto;
		left: auto;
		height: auto;
		z-index: auto;
		width: auto;
		background: none;
		box-shadow: none;
	}

	/* Same two-class selector as the default rule, so these win.
	   white-space: nowrap forces single-line labels rather than
	   relying on width alone, which would still wrap if the column
	   ever gets squeezed. */
	.pricing-labels .pricing-label {
		font-size: 1.5rem;
		padding-left: 1rem;
		white-space: nowrap;
		line-height: inherit;
	}

	.pricing-card {
		flex: 1 1 0;
	}

	/* Hide the mobile scroll controls entirely on the desktop layout */
	.pricing-scroll-controls {
		display: none;
	}
}

/* ============ COVERFLOW GALLERY — 1600px UP: caption beside the cards ============ */
@media (min-width: 1600px) {
	.coverflow-stage {
		height: 50vh;
		min-height: 46rem; /* keeps room for the cards and reflection on short screens */
		/* Shifts the cards up a little so the reflection has room below
		   and clears the hint text. */
		padding-bottom: 14rem;
	}

	.coverflow-caption {
		top: 50%;
		bottom: auto;
		left: calc(50% + var(--cf-caption-offset));
		transform: translateY(-50%);
		width: 28rem;
		padding-left: 3rem;
		border-left: 1px solid rgba(250, 250, 250, 0.15);
		text-align: left;
	}

	.coverflow-caption-actions {
		justify-content: flex-start;
	}

	/* Arrows back to the middle of the stage, as before. */
	.coverflow-arrow {
		top: 50%;
	}
}
/* ============ END COVERFLOW GALLERY — 1600px UP ============ */

@media(min-width: 1800px) {
.section-menu-toggle {
      display: none;
   }

   .section-menu-anchor {
      position: static;
   }

   #section-menu {
      position: static;
      width: auto;
      background-color: transparent;
      max-height: none;
      overflow: visible;
      padding: 0;
      box-shadow: none;
   }

   #section-menu .menu {
      display: flex !important;
      flex-direction: row !important;
      height: auto;
      padding: 0;
      margin: 0;
      gap: 1.6em;
      font-size: inherit;
   }

.card-height {
  min-height: 275px;
}

.big-card-height {
  min-height: 425px;
}

.block-grad {
	min-height: 40vh;
}

.card__description {
	font-size: 1.3rem;
}

h1 {
	font-size: 4.15rem;
	line-height: 5.5rem;
}

h2 {
	font-size: 3.1em;
	font-weight:700;
}

	.bot-marg {
		margin-bottom: 8vh;
	}

	.dropdown>a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;
	}

	.nav-tabs {
		justify-content: flex-start;
		gap: 3px;
		padding-left: 0px;
	}

	.nav-tabs .nav-link {
		font-size: 1.4rem;
	}

	.menu-arrow {
		fill: #383737;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: #fff;
		list-style: none;
		padding-bottom: 0.8em !important;
		margin: 0;
		z-index: 99999 !important;
	}

	.dropdown:hover>.dropdown-content,
	.dropdown:focus-within>.dropdown-content {
		display: block;
		z-index: 9999;
	}

	p {
		font-size: 1.7rem;
		font-weight: 400;
	}

		

	.oval-button,
	.oval-button2, .oval-button3 {
		font-size: 1.5rem;
		font-weight: 700;
		padding: 1.5em 2em;
		width: 224px;
		justify-content: center;
	}

	.logo-img {
		max-width: 155px;
	}

	.right {
		display: flex;
		font-size: 1.6rem;
		justify-content: flex-end;
		padding-right: 2em;
		gap: 0.5em;
	}

	.links-container {
		background-color: color-mix(in srgb, var(--white) 0%, transparent);
		position: static;
		flex-direction: row;
		width: 100%;
		height: 100%;
		box-shadow: none;
		transition: none;
		font-size: 1.4rem;
	}

	.links-container ul {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
		gap: 1.5rem;
		display: flex;
		justify-content: center;
	}

	.links-container li {
		width: auto;
		font-weight: 400;
	}

	.links-container li a {
		display: inline;
		width: 100%;
		padding: 0.5em 0.5em;
		text-decoration: none;
	}

	nav a {
		display: flex;
		height: 100%;
		width: auto;
		justify-content: center;
		align-items: center;
		color: var(--gunmetal);
		font-size: 1.6rem;
	}

	nav .home-link {
		margin-right: auto;
	}

	.open-sidebar-button,
	.close-sidebar-button {
		display: none;
	}

	.middle {
		order: 2;
	}

	.right {
		order: 3
	}

	.left,
	.middle,
	.right {
		flex: 1;
	}

	.middle {
		flex: 4;
	}

	.icon {
		width: 40px;
		fill: #4d4d4d;
		padding-top: 0.25em;
	}

	.show {
		display: block;
	}

	.jumbotron2 p {
		font-size: 2.5rem;
		font-weight: 100;
	}

	/* min-height, matching the base rule, so it can still grow on
	   short screens. */
	.jumbotron2 {
		min-height: 40vh;
		padding: 5em 1.5em 4em;
	}

	h3 {
		font-size: 2.5rem;
		color: var(--gunmetal);
	}

	.banner {
		justify-content: flex-end;
		align-items: center;
		padding: 0 2em;
	}

	.banner>span {
		margin-right: 1em;
	}

	.new-h2 {
		color: var(--white);
	}

	.nav-links {
		display: flex;
		align-items: center;
	}

	.dropdown {
		position: relative;
		display: block;
		z-index: 3;
	}

	.dropdown-content li {
		padding: 0.2rem 0;
	}

	footer li {
		text-align: left;
		margin: 0;
		padding: 0.4em;
	}

	.col-md-2.d-flex.flex-column {
		display: flex;
		flex-direction: column;
	}

	.post-link {
		margin-top: auto;
	}

	.video-thumb {
		width: 100%;
		height: 275px;
		object-fit: cover;
		object-position: center;
		border-radius: 1%;
	}

	.video-title {
		color: var(--gunmetal);
		font-size: 1.8rem;
		padding-bottom: 0.5em;
		font-weight:600;
	}

	.viewport {
		--atlas-h: 50vh;
	}

	.scroller {
		animation-duration: var(--speed);
	}

	.cloud {
		width: var(--cloud-width);
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.0) 30%, rgba(255, 255, 255, 1) 80%);
	}

	.ovr {
		line-height: 1.1;
	}
	li#menu-item-197, li#menu-item-578, li#menu-item-634, li#menu-item-75 {
		position: relative;
		isolation: auto;
		overflow: visible;
		z-index: 10;
	}

	li#menu-item-197>a, li#menu-item-578>a, li#menu-item-634>a, li#menu-item-75>a {
		position: relative;
		z-index: 1;
		transition: color .2s ease;
	}

	li#menu-item-197::before, li#menu-item-578::before, li#menu-item-634::before, li#menu-item-75::before  {
		content: "";
		position: absolute;
		left: -10px;
		right: -10px;
		top: -.5em;
		height: 70px;
		background: var(--off-black);
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		transform-origin: top;
		transform: scaleY(0);
		opacity: 0;
		transition: transform .3s ease, opacity .22s ease;
		pointer-events: none;
		z-index: -1;
	}

	li#menu-item-197:focus-within::before,
	li#menu-item-197:active::before,
	li#menu-item-197.current-menu-item::before,
	li#menu-item-197.current_page_item::before,
	li#menu-item-197.current-menu-ancestor::before,
	li#menu-item-197.current-menu-parent::before,
	li#menu-item-578:focus-within::before,
	li#menu-item-578:active::before,
	li#menu-item-578.current-menu-item::before,
	li#menu-item-578.current_page_item::before,
	li#menu-item-578.current-menu-ancestor::before,
	li#menu-item-578.current-menu-parent::before,
	li#menu-item-634:focus-within::before,
	li#menu-item-634:active::before,
	li#menu-item-634.current-menu-item::before,
	li#menu-item-634.current_page_item::before,
	li#menu-item-634.current-menu-ancestor::before,
	li#menu-item-634.current-menu-parent::before,
	li#menu-item-75:focus-within::before,
	li#menu-item-75:active::before,
	li#menu-item-75.current-menu-item::before,
	li#menu-item-75.current_page_item::before,
	li#menu-item-75.current-menu-ancestor::before,
	li#menu-item-75.current-menu-parent::before
	 {
		opacity: 1;
		transform: scaleY(1);
	}

	.current-menu-item .menu-arrow,
	.current-menu-parent .menu-arrow,
	.current-menu-ancestor .menu-arrow {
		fill: #fff;
	}
	nav li#menu-item-197:focus-within>a,
	nav li#menu-item-197:active>a,
	nav li#menu-item-197.current-menu-item>a,
	nav li#menu-item-197.current_page_item>a,
	nav li#menu-item-197.current-menu-ancestor>a,
	nav li#menu-item-197.current-menu-parent>a,
	nav li#menu-item-197>a [aria-current="page"] {
		color: #fff !important;
	}
	
	nav li#menu-item-578:focus-within>a,
	nav li#menu-item-578:active>a,
	nav li#menu-item-578.current-menu-item>a,
	nav li#menu-item-578.current_page_item>a,
	nav li#menu-item-578.current-menu-ancestor>a,
	nav li#menu-item-578.current-menu-parent>a,
	nav li#menu-item-578>a [aria-current="page"] {
		color: #fff !important;
	}
	
	nav li#menu-item-634:focus-within>a,
	nav li#menu-item-634:active>a,
	nav li#menu-item-634.current-menu-item>a,
	nav li#menu-item-634.current_page_item>a,
	nav li#menu-item-634.current-menu-ancestor>a,
	nav li#menu-item-634.current-menu-parent>a,
	nav li#menu-item-634>a [aria-current="page"] {
		color: #fff !important;
	}

	nav li#menu-item-75:focus-within>a,
	nav li#menu-item-75:active>a,
	nav li#menu-item-75.current-menu-item>a,
	nav li#menu-item-75.current_page_item>a,
	nav li#menu-item-75.current-menu-ancestor>a,
	nav li#menu-item-75.current-menu-parent>a,
	nav li#menu-item-75>a [aria-current="page"] {
		color: #fff !important;
	}

	@media (prefers-reduced-motion: reduce) {
		li#menu-item-197::before {
			transition: opacity .15s linear;
			transform: none;
		}
	}

	 .template-menu {
    	display: flex;
}

	.template-menu .menu a {
		color: var(--white);
		position: relative;
		padding-bottom: 0.45em;
		padding-right:0;
		margin-right:0;
		font-size:1.4rem;
		font-weight:400;
	}

	.template-menu .menu {
		height: 3vh;
		gap:1.6em;
	}

	nav.template-menu{
		justify-content: flex-start;

	}

	.breadspan {
		padding: 0 0.5em;
	}

	.notice {
		min-height: 30vh;
	}

	#web-dev ul,
	#network ul,
	#awc ul {
		line-height: 2em;
		margin-left: 1em;
		font-size: 2rem;
	}
		
	.opacity{
		opacity:1;
	}

	.picture-card p {
		font-size: 1.4rem;
		line-height: 1.3em;
	}

	.picture-card h3 {
		font-family:'Segoe UI', Roboto, sans-serif;
		font-size: 1.8rem;
	}

	.search-list {
		list-style: none;
		padding: 0;
		margin: 2rem 0;
	}

	.search-item {
		margin-bottom: 1.5rem;
		border-bottom: 1px solid #eee;
		padding-bottom: 1.5rem;
	}

	.search-link {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: inherit;
	}

	sup a {
		color: var(--gunmetal);
	}

	#fn1 {
		font-size: 1.6rem;
	}

	#menu-item-76 {
		position: relative;
		z-index: 9999;
	}

	#menu-item-76 .dropdown-content {
		z-index: 10000 !important;
	}

	.page-id-195 #topNav,
	.page-id-364 #topNav,
	.page-id-369 #topNav,
	.page-id-372 #topNav {
		border-bottom: 0 !important;
		box-shadow: none !important;
	}

	#ht,
	#network,
	#web-dev,
	#sm,
	#bespoke,
	#off365 {
		scroll-margin-top: 225px;
	}

	.light-text {
		font-size: 2rem !important;
	}

	.ratio iframe {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	ul {
		font-size: 1.7rem;
		font-weight: 400;
		padding-left: 2em;
		line-height:1.8;
	}

	.tcc-tick-list-centered li {
		font-size: 1.7rem;
	}

	.tcc-exp-list {
		font-size: 1.7rem;
	}

	#offer li {
		margin-bottom: 0.5em;
	}

	.cu {
		min-height: 53vh;
	}

	.wp-block-columns {
    display: flex;
    gap: 20px;
}

.wp-block-column {
    flex: 1;
}

.mywidth{
	width:80%
}

/* SHARED HERO (.tcc-hero) — 1800px up */
.tcc-hero {
	min-height: 75vh;
}

.tcc-hero--home-tuition {
	background-image: url(images/home-tuition-tutor-and-student.avif);
}

.tcc-hero__title {
	font-size: 5rem;
}

.tcc-hero__rating img {
	width: 46rem;
}

}

/* ============ 1900px UP ============ */
/* Training hub "Why work with TCC?" cards: stacked one per row below
   1900px, three equal columns from 1900px up. .row > raises the
   specificity above Bootstrap's .col-12, so this wins whatever order
   the stylesheets load in. */
@media (min-width: 1900px) {
	.row > .tcc-trust-col {
		flex: 1 0 0%;
		width: auto;
	}
}
/* ============ END 1900px UP ============ */

/* =====================================================================
   PAGE TRANSITIONS
   Cross-document view transitions: when moving between pages on the
   site, the browser cross-fades the old page into the new one instead
   of flashing white. No JavaScript involved; browsers without support
   simply load the page as normal. The sticky nav is named so it stays
   put while the content underneath fades.
   ===================================================================== */
@view-transition {
	navigation: auto;
}

#topNav {
	view-transition-name: site-nav;
}

/* =====================================================================
   RETURN VISITS
   The hero entrance animations play on the first page of a visit only.
   header.php adds .is-return to <html> on every later page in the same
   browser session, so the hero appears straight away.
   ===================================================================== */
html.is-return .tcc-hero .fadein2,
html.is-return .tcc-hero .fadeintop,
html.is-return .tcc-hero .fadeinbot,
html.is-return .tcc-hero .fadeinleft,
html.is-return .tcc-hero .fadeinright {
	animation: none;
	opacity: 1;
	transform: none;
}

/* =====================================================================
   REDUCED MOTION — not width-based, so kept after all the width
   queries above, where they override every animation they target.
   ===================================================================== */

/* Page transitions: switch off the cross-fade */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* Entrance animations: content appears in place, without sliding or fading.
   .animated starts at opacity 0 and tcc.js adds .fadeinbot2 as it scrolls
   into view, so both are covered here. */
@media (prefers-reduced-motion: reduce) {
	.animated,
	.fadein2,
	.fadeintop,
	.fadeinbot,
	.fadeinbot2,
	.fadeinleft,
	.fadeinright {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* Pricing table */
@media (prefers-reduced-motion: reduce) {
	.pricing-scroll {
		scroll-behavior: auto;
	}
}

/* Section sub-nav */
@media (prefers-reduced-motion: reduce) {
	#subNav {
		transform: translateY(0);
	}
	#subNav.subnav-play {
		animation: none;
	}
}

/* Background carousel */
@media (prefers-reduced-motion: reduce) {
	.bg-carousel-img {
		animation: none;
		opacity: 1;
	}
	.bg-carousel picture:not(:first-child) .bg-carousel-img {
		display: none;
	}
}

/* World map scroller */
@media (prefers-reduced-motion: reduce) {
	.scroller {
		animation: none;
	}
}

/* Coverflow gallery */
@media (prefers-reduced-motion: reduce) {
	.coverflow-caption,
	.coverflow-lightbox,
	.coverflow-lightbox.is-open {
		transition: none;
	}
}

/* ==========================================================
   In-content text links
   Styles plain links inside body text so they're visible.
   Links with a class (buttons, nav, badges) are unaffected.
   ========================================================== */

.main-content p a:not([class]),
.main-content li a:not([class]) {
	font-family: inherit;
	font-size: inherit;
	color: var(--tccblue);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: color 0.2s ease;
}

.main-content p a:not([class]):hover,
.main-content li a:not([class]):hover {
	color: var(--tawny);
}

.main-content p a:not([class]):focus-visible,
.main-content li a:not([class]):focus-visible {
	outline: 2px solid var(--tawny);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Links inside white-text sections (e.g. .col-white on dark blocks) */
.main-content .col-white a:not([class]) {
	color: #fff;
}

.main-content .col-white a:not([class]):hover {
	color: var(--tawny);
}

/* Blog articles only (single.php adds .tcc-article to .main-content):
   links in the dark block-grad2 sections are tawny, as the default
   tccblue disappears against the dark blue. Hover goes lighter. */
.tcc-article .block-grad2 p a:not([class]),
.tcc-article .block-grad2 li a:not([class]) {
	color: var(--tawny);
}

.tcc-article .block-grad2 p a:not([class]):hover,
.tcc-article .block-grad2 li a:not([class]):hover {
	color: var(--tawnylighterstill);
}
/* ==========================================================
   Links inside cards (e.g. Safeguarding Policy on the
   Home Tuition hub). White to stay readable on the dark
   card and on its orange hover state.
   ========================================================== */

.new-card .card-link {
	color: var(--white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.new-card .card-link:hover,
.new-card .card-link:focus-visible {
	color: var(--white);
	text-decoration-thickness: 2px;
}

.new-card .card-link:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
	border-radius: 2px;
}
/* Inline testimonial SVGs (front-page carousel): scale to the
   width of their .mywidth wrapper, like the old <img> tags did. */
.testimonial-svg svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Cards on the blue gradient backgrounds: tawny titles.
   The light card variant keeps its own title colour. */
.block-grad .new-card:not(.new-card-light) h3,
.block-grad2 .new-card:not(.new-card-light) h3,
.bg-block-grad-round .new-card:not(.new-card-light) h3 {
	color: var(--white);
	font-weight:700;
}

/* On hover the card turns orange, so switch the title back to
   dark grey to keep it readable. */
.block-grad .new-card:not(.new-card-light):hover h3,
.block-grad2 .new-card:not(.new-card-light):hover h3,
.bg-block-grad-round .new-card:not(.new-card-light):hover h3 {
	color: #302f2f;
}

/* =====================================================================
   LENIS SMOOTH SCROLLING
   Lenis animates the scroll itself, so the browser's own smooth
   scrolling (html { scroll-behavior: smooth } above) must be off while
   Lenis is running, or the two fight and scrolling judders. When Lenis
   isn't running (reduced motion, or the script fails), the html.lenis
   class is absent and native smooth scrolling still applies.
   ===================================================================== */
html.lenis {
	scroll-behavior: auto;
}