/*

* {
  outline: 1px solid red;
}
*/

html {
  scroll-behavior: smooth;
}

/* Apply to all anchor targets */
[id] {
  scroll-margin-top: 120px; /* adjust to your nav height */
}


/* Colours 


warwicka off-white		#dcdfd6;
grey-text				#c4c6bd;
dark grey				#333;
red						#e9310e;
pink					pink;
yellow					#ffcc00;
green					#00b44e;

*/

/* Table of contents */

#table-contents {
  margin: 2rem auto 0;
  max-width: 1200px;
  padding: 0 1rem;	
}

.toc-title {
  color: #c4c6bd;
  text-align: center;   /* center the text horizontally */
  margin: 0 auto 1rem;  /* center block + add spacing below */
}


/* reset list + stack each item vertically (button above description) */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links .toc-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
	width: 200px;
  border-left: 1px solid #333; /* default border */
  padding-left: 1rem;          /* default padding */
}


/* Remove border on first item and adjust padding */
.nav-links .toc-item:first-child {
  border-left: none;
  padding-left: calc(1rem + 1px); /* keeps total width consistent */
}

.nav-links .toc-item a {
  display: inline-block;     /* so padding works as expected */
  margin-bottom: 1rem;    /* adjust to taste */
}


/* description style (NOT affected by .nav-links a rules) */
.toc-desc {
	margin: 0 10px 10px 5px;
	/* color: #c4c6bd; */
  /* margin-top: 0.25rem;
  color: #c4c6bd;
  line-height: 1.2;
  font-size: 0.9rem; */
}

/* Ensure default opacity for descriptions */
.toc-item .toc-desc {
  opacity: 0.4; /* or whatever starting opacity */
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.6s ease;
}

/* On hover/focus of the link, make the desc fully opaque */
.toc-item:hover .toc-desc,
.toc-item:focus-within .toc-desc {
  opacity: 1;
	transform: translateY(-5px);
}

/* Your given styles */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 160px;
}

.custom-dropdown {
  width: 100%;
  padding: 0.4rem 1rem;
  padding-right: 2.5rem; /* space for arrow */
  background-color: #191919;
  color: #dcdfd6;
  font-size: 1rem;
  font-family: 'Monument Grotesk', sans-serif;
  border: 1px solid #333;
  border-radius: 50px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.custom-dropdown:focus {
  outline: none;
  border-color: #dcdfd6;
}

.custom-arrow {
  position: absolute;
  pointer-events: none;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  height: 1rem;
  width: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dcdfd6;
}

/* Default: show pills, hide dropdown */
.toc-select-only { display: none; }




#showreel {
  margin: 2rem auto;      /* auto left/right to center */
  max-width: 1200px;      /* limit width */
  padding: 0 1rem;        /* optional side padding for small screens */
}

#testimonials {
  margin: 2rem auto;      /* auto left/right to center */
  max-width: 1200px;      /* limit width */
  padding: 0 1rem;        /* optional side padding for small screens */
}

#clients {
  margin: 2rem auto;      /* auto left/right to center */
  max-width: 1200px;      /* limit width */
  padding: 0 1rem;        /* optional side padding for small screens */
}

#expertise {
  margin: 2rem auto;      /* auto left/right to center */
  max-width: 1200px;      /* limit width */
  padding: 0 1rem;        /* optional side padding for small screens */
}

#expertise p {
  color: #dcdfd6;
  line-height: 1;
}

.expertise-tables td .small {
  color: #333;   /* or #aaa if you want it even lighter */
  margin-left: 4px; /* gives a little breathing room */
}



/* Introduction */

.intro-outer {
  position: relative;
  background-color: #dcdfd6;

  /* your image
  background-image: url("../Assets_2025/IMG/Circular/Andrew0.jpg");
 */
	
  /* don’t tile */
  background-repeat: no-repeat;

  /* place it exactly (x y) */
  /* option A: pixels from the top-left of the viewport (because it's fixed) */
  background-position: 70% 500px;          /* x y */

  /* or option B: keywords + offsets */
  /* background-position: left 120px top 40px; */

  /* control its size (so it doesn’t auto-scale to cover) */
  background-size: 300px auto;              /* width height */

  /* keep it still while scrolling */
  background-attachment: fixed;

  padding: 1rem 0;
}


/* keep your inner content constrained */
#introduction {
  margin: 2rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

.introduction-txt {
  color: #191919;
	margin: 0 0 1rem 0 ;
}

.introduction-txt a {
	/* font-family: 'Monument Grotesk', sans-serif; */
  color: #191919;
  text-decoration: underline;
  background-color: transparent; /* start with none */
  transition: background-color 0.5s ease; /* slow fade */
	/* font-style: italic; */
}

.introduction-txt a:hover {
	color: #dcdfd6;
  background-color: rgba(25, 25, 25, 1); 
  text-decoration: none;
}

/* Two-column grid layout for intro */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 4rem;
  align-items: start; /* align both columns from the top */
}



/* Left column boxes */
.intro-left {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* keep some breathing space between video and bottom box */
}


.intro-right {
  display: flex;
  flex-direction: column;      /* stack top → bottom */
  /*justify-content: space-between;  push first child up, last child down */
  height: 100%;                 /* make sure it fills available height */
}

.intro-box {
  /* background-color: #191919;  example colour */
  color: #191919;
}

.intro-box.bottom-box {
  /* border: 1px solid #191919;
	padding: 0;
	margin: 0 1rem;*/
	line-height: 1.1;
}

.intro-box.bottom-box p {
  margin: 0 0 0.4rem 0;  /* tighter spacing */
}

.intro-box.bottom-box p:last-child {
  margin-bottom: 0;  /* remove gap after the last one */
}



.signed {
  text-align: left;
}

.signed .signature {
  width: 140px;
  height: auto;
}






/* Clients */


#clients > p {
  margin: 0;   /* kill default top/bottom margins */
}

#clients > p:first-of-type {
	/* font-size: 1vw; */
  color: #dcdfd6;
  line-height: 1;
  margin-bottom: 0.4rem;  /* tighten spacing to the date line */
}

/* (optional) ensure the HR isn’t adding extra space */
.hr-line { margin-top: 1rem; }


.client-row {
  display: flex;
  flex-wrap: wrap;
  /*gap: 5px;*/
}

.client-name {
  color: #dcdfd6;
  text-decoration: none;
  white-space: nowrap;
	font-size: 2rem;
  	line-height: 1.1; /* tighter spacing */
}

.client-name sup {
  vertical-align: super;
  opacity: 0.8;
  margin-right: 5px;
}

.client-name a {
  color: #dcdfd6;
  text-decoration: none;
}

.client-name a:hover {
  text-decoration: underline;
}

/**/

/* --- Headings in testimonials --- */
#testimonials > p { margin: 0; }
#testimonials > p:first-of-type {
  color: #dcdfd6;
  line-height: 1;
  margin-bottom: 0.4rem;
}

/* --- Entrance animation --- */
.tst-enter { opacity: 0; transform: translateY(12px); }
.tst-enter-active {
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
}

/* --- Grid + panels --- */
.tst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.panel {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #191919;
}

/* --- Left panel typography --- */
.panel-left .quote { 
  flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box;
  font-family: 'Cambon', sans-serif; font-weight: normal; font-style: normal;
  font-size: 2rem; line-height: 1; text-align: left; color: #dcdfd6; margin: 0;
}
.panel-left .quote .meta span { display: block; margin: 0; }
.panel-left .quote .meta .author {
  font-family: 'Cambon', sans-serif; font-weight: 400; font-style: normal;
  font-size: 0.8rem; line-height: 1; text-align: left; color: #dcdfd6; margin: 0.8rem 0 0;
}
.panel-left .quote .meta .role,
.panel-left .quote .meta .client {
  font-family: 'Lettera Std', serif; font-weight: bold; font-style: normal;
  font-size: 0.6rem; font-synthesis: none; color: #c4c6bd; opacity: 0.8;
}
.panel-left .quote .meta .role   { margin: 0.4rem 0 0; }
.panel-left .quote .meta .client { margin: 0.2rem 0 0; }

/* --- Slides & tracks --- */
.panel .slide {
  height: var(--slide-h, 0px);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.track {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--slide-gap, 0px);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* --- Right panel overlay pattern --- */
.panel-right { position: relative; z-index: 0; }
.panel-right::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('/Assets_2025/IMG/Circular/4x1_black.png');
  background-repeat: repeat;
  background-size: auto; /* set to e.g. 4px 1px if you want fixed density */
  opacity: 0.3;
  pointer-events: none;
  z-index: 2; /* over media, under hit layer */
}
.panel-right .track { position: relative; z-index: 1; }
.panel-right .panel-hit { z-index: 10; }

/* --- Right panel preloader --- */
.panel-right .panel-loader {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.25); z-index: 6; transition: opacity .25s ease;
}
.panel-right .panel-loader.hidden { opacity: 0; pointer-events: none; }
.panel-right .panel-loader::after {
  content: ""; width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.9);
  border-radius: 50%; animation: tstspin .8s linear infinite;
}
@keyframes tstspin { to { transform: rotate(360deg); } }

/* --- Media base --- */
.media { position: relative; width: 100%; height: 100%; }
.media img, .media video {
  width: 100%; height: 100%; object-fit: cover; display: block; background: #111;
}
.media .placeholder {
  width: 100%; height: 100%; background: #111; color: #666;
  display: grid; place-items: center; font-size: 1rem; letter-spacing: .04em;
}

/* --- Vimeo cover (choose ONE approach; this covers 16:9 fully) --- */
.panel-right .media.video.vimeo { position: relative; width: 100%; height: 100%; overflow: hidden; }
.panel-right .media.video vimeo iframe,
.panel-right .media.video.vimeo > iframe {
  position: absolute; top: 50%; left: 50%;
  /* 16:9 cover: height matches container, width scaled */
  height: 100%; width: 177.78%;
  transform: translate(-50%, -50%); display: block; border: 0;
}

/* --- Interactions --- */
.panel-left  { cursor: w-resize; }
.panel-right { cursor: e-resize; }
.panel-hit {
  position: absolute; inset: 0; z-index: 10;
  background: transparent; border: 0; padding: 0; cursor: inherit;
}
.panel-hit:focus-visible { outline: 2px dashed #dcdfd6; outline-offset: 4px; }

/* --- OPTIONAL: nav under the panels --- */
.tst-nav {
  display: flex; justify-content: center; gap: 1rem; margin-top: 1rem;
}



/* Expertise */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.data-table thead th {
  text-align: left;
  padding: 10px;
  font-weight: normal;
  color: #c4c6bd;
  border: 1px solid #333;
}

/* Target the first data row and give it a top border */
.data-table tbody tr:first-child td {
  border: 1px solid #333;
	color: #c4c6bd;
}

.data-table tbody tr + tr {
  border: 1px solid #333;
		color: #c4c6bd;
}

.data-table td {
  padding: 10px;
  color: #c4c6bd;
  border: 1px solid #333;
}


.data-table-short {
	width: 100px;
}

.expertise-introduction {
	color: #dcdfd6;
}

.expertise-introduction a {
	/* font-family: 'Monument Grotesk', sans-serif; */
  color: #dcdfd6;
  text-decoration: underline;
  background-color: transparent; /* start with none */
  transition: background-color 0.5s ease; /* slow fade */
	/* font-style: italic; */
}

.expertise-introduction a:hover {
	color: #191919;
  background-color: rgba(220, 223, 214, 1);  /* 60% white */
  text-decoration: none;
}


/* Grid for the four expertise tables */
.expertise-tables {
  display: grid;
  /* gap: 20px; */
  grid-template-columns: 1fr;             /* mobile: 1 × 4 (stacked) */
	margin-top: 3rem; /* 👈 add top margin here */
}

.expertise-cell {
  /* optional card feel; remove if your .data-table already styles enough */
  background: #191919;
  border-radius: 10px;
  padding: 0 20px 0 0;
  color: #dcdfd6;
}

/* Make the table blend with your existing admin/data-table look */
.expertise-cell .data-table {
  width: 100%;
  border-collapse: collapse;
}

.expertise-cell thead th {
  text-align: left;
  padding: .5rem;
}

.expertise-cell tbody td {
  padding: .5rem;
}



/* --- Showreel --- */

/* Vars */
#showreel {
  --c-bg: #000;
  --c-text: #dcdfd6;
  --c-soft: #aeb3aa;           /* if you want the softer desc color back */
  --c-mid: #333;
  --c-accent: #00b44e;
  --gap: .5rem;
  --thumb-gap: 1rem;
  --title-lh: 1.25;
  --icon: 22px;
}

/* Base text */
#showreel p { color: var(--c-text); }

/* Layout */
.sr { display: grid; gap: var(--gap); }

/* Player */
.sr-player { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--c-bg); }
.sr-player > iframe,
.sr-player > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0 !important; outline: none !important; box-shadow: none !important;
  display: block;
}
.sr-player > iframe:focus,
.sr-player > video:focus { outline: none !important; }

/* Meta */
#showreel .sr-meta { margin: .5rem auto 0; text-align: center; height: 100px; }
#showreel .sr-title { margin: 0; font-size: 1rem; line-height: 1.1; color: var(--c-text); }
#showreel .sr-desc  {
  margin: 0; padding-top: .5rem;
  font-size: .8rem; line-height: 1.2; max-width: 60ch;
  white-space: pre-line;
}

/* Nav buttons */
.sr-nav {
  background: none; border: 0; padding: .4rem;
  display: grid; place-items: center; line-height: 0;
  cursor: pointer; color: var(--c-text);
}
.sr-nav:focus-visible { outline: 2px dashed var(--c-text); outline-offset: 2px; }
.sr-nav[hidden] { display: none !important; }
.sr-nav-icon { width: var(--icon); height: var(--icon); display: block; pointer-events: none; }








/* Thumbs wrapper */
.sr-thumbs-wrap {
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center;
}
.sr-nav { white-space: nowrap; }


/* Thumbs strip */
/* Thumbs strip — NO TEASER */
.sr-thumbs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: var(--thumb-gap, 1rem);
  padding-left: 0;
  padding-right: 0;
  scroll-padding-inline-start: 0;
  scroll-padding-inline-end: 0;
  scroll-snap-type: none;       /* JS controls paging; no teaser */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-inline: contain;
}
.sr-thumbs::-webkit-scrollbar { display: none; }

.sr-thumbs > .sr-thumb {
  flex: 0 0 calc((100% - 3 * var(--thumb-gap, 1rem)) / 4);
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  /* scroll-snap-align only when snap is enabled (mobile below) */
}


/* Cards */
.sr-thumb { scroll-snap-stop: always; }

/* Thumb button & image */
.sr-thumb-btn { position: relative; border: 0; padding: 0; background: none; display: block; width: 100%; }
.sr-thumb-img {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #111;
  border: 1px solid transparent !important;
  opacity: 1; transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease, outline-color .2s ease;
}
.sr-thumb.is-active .sr-thumb-img { opacity: .3; box-shadow: none !important; }
.sr-thumb.is-active .sr-thumb-btn::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--c-mid); box-shadow: inset 0 0 0 1px var(--c-mid); pointer-events: none;
}

/* Title under thumb */
#showreel .sr-thumb-title {
  display: grid; grid-template-columns: 10px 1fr; column-gap: .4rem;
  align-items: start; justify-content: center; margin-top: .4rem;
  min-height: calc(2 * var(--title-lh)); line-height: var(--title-lh); color: var(--c-text);
}

.sr .sr-thumb.is-active .sr-thumb-title::before { background: var(--c-accent); }

#showreel .sr-thumb-title-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-align: left; max-width: 100%; min-height: calc(2 * var(--title-lh)); margin-top: .1rem;
}

/* Hover/focus effect: shrink the thumbnail image and soften it */
.sr-thumb-img {
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: center;
  will-change: transform, opacity;
}

.sr-thumb-btn:hover .sr-thumb-img,
.sr-thumb-btn:focus-visible .sr-thumb-img {
  transform: scale(.9);
  opacity: .6;
}

/* If a thumb is "active", keep its dim level at .3 even on hover */
.sr-thumb.is-active .sr-thumb-btn:hover .sr-thumb-img,
.sr-thumb.is-active .sr-thumb-btn:focus-visible .sr-thumb-img {
  opacity: .3;
}

.sr-thumb-btn:hover::after,
.sr-thumb-btn:focus-visible::after { transform: scale(.9); }
.sr-thumb-btn::after { transition: transform .2s ease; transform-origin: center; }

/* Reserve dot space always; default inactive grey */
#showreel .sr-thumb-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333; /* inactive video circle */
  align-self: start;
  transform: translateY(.15em);
}

/* Active: turn the dot green */
#showreel .sr-thumb.is-active .sr-thumb-title::before {
  background: #00b44e; /* active video circle */
}

#showreel .sr-nav {
  position: absolute;    /* take them out of the thumb flow */
  top: 45%;              /* vertically center */
  transform: translateY(-50%);
  z-index: 5;            /* above thumbs */
  background: rgba(25,25,25,0.4);
  /* border-radius: 50%; */
}

#showreel #sr-prev { left: 0; }
#showreel #sr-next { right: 1rem; }

#showreel .sr-nav {
  background: rgba(25,25,25,1);
  padding: 0.6rem;
  cursor: pointer;
  display: inline-grid; /* stops vertical shift in grid layout */
  place-items: center;
  transition: background 0.2s ease, transform 0.15s ease;
  border-radius: 0; /* force remove rounded corners */
  transform-origin: center center; /* scale from center */
}

#showreel .sr-nav:hover {
  background: rgba(25,25,25,0.8);
}

#showreel .sr-nav:active {
  background: #00b44e;
}

#showreel .sr-nav-icon {
  width: 22px;
  height: 22px;
}

.sr-thumbs-wrap {
  position: relative;    /* so the absolute navs position correctly */
}


/* Respect reduced motion: no scaling, only a subtle opacity change */
@media (prefers-reduced-motion: reduce) {
  .sr-thumb-btn:hover .sr-thumb-img,
  .sr-thumb-btn:focus-visible .sr-thumb-img {
    transform: none;
    opacity: .6;
  }
}




/* iPhone */
/* Mobile-first stack — target iPhones & small devices */
@media (max-width: 699px) {
	
/* iPhone: Table of contents */	
	
  .toc .nav-links { display: none; }
  .toc-select-only { display: flex; justify-content: center;  width: 100%; margin: 0.5rem 0 1rem; }
  .custom-select-wrapper { width: 220px; } /* wider on mobile */
	.toc-select-only { display: flex; justify-content: center; margin-top: 1rem; }
  .custom-select-wrapper { width: 100%; max-width: 200px;}
	
/* iPhone: Introduction */
	.intro-grid { grid-template-columns: 1fr; }
	.introduction-txt { font-size: 1.2rem; line-height: 1.1; max-width: 74vw; }
  	.intro-right { padding: 0; margin: 0; }
  	.intro-right .intro-box { padding: 0; margin: 0; }

/* iPhone: Showreel */
	
  	.sr-thumbs > .sr-thumb {
    flex: 0 0 calc((100% - 1 * var(--thumb-gap, 1rem)) / 2); /* 2 across */
  	}
	.sr-thumbs { scroll-snap-type: x mandatory; }
  	.sr-thumb { scroll-snap-align: start; }
	/* #showreel .sr-nav { position: relative; top: -12px; } */
	#showreel #sr-prev { top: 60px; }
	#showreel #sr-next { top: 60px; right: 0;}

/* iPhone: Testimonials */
	
  .tst-grid { grid-template-columns: 1fr; }
  /* .panel-right { aspect-ratio: 16 / 9; } */
	
  .panel-right { aspect-ratio: auto;  width: 100%; height: calc((100vw / (16 / 9)) - 2px); }	
	
  .panel-left { aspect-ratio: auto;  width: 100%; height: calc((100vw / (16 / 9)) + 20px); }
	
  .panel .slide {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
  }
  .panel-left .quote {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;      /* allow wrapping in flex context */
    box-sizing: border-box;
    padding-right: 0;  /* your current mobile setting */
	font-size: 1.2rem;
	line-height: 1.1;
  	}
	
	.panel-left .quote .meta .author { font-size: 0.7rem;  }
	.panel-left .quote .meta .role,
	.panel-left .quote .meta .client { font-size: 0.55rem;}
	.panel-left, .panel-left .track, .panel-left .slide, .panel-left .quote { max-width: none !important; }
	
/* iPhone: Clients */	
	
	.client-name { font-size: 1.2rem; line-height: 1.1; }
	
/* iPhone: Expertise */	
	
  	.expertise-tables { row-gap: 20px; }
	.expertise-introduction {
  	font-size: 1.2rem; line-height: 1.1; max-width: 80vw;}
	.data-table td { font-size: 0.8rem; }
	.expertise-cell { padding: 0 0 0 0; }
	.expertise-tables td { font-size: 0.8rem; }
}

/* iPad */
/* Tablet breakpoint — two-up layout but slightly tighter text */
@media (min-width: 700px) and (max-width: 1199px) {
	
/* iPad: Table of contents */	

  .nav-links {
    display: flex;
    flex-wrap: wrap;       /* allows wrapping if they don't all fit in one row */
    gap: 0.4rem;           /* same gap as before */
    justify-content: center;
  }

  .nav-links .toc-item {
    border-left: none;     /* remove side borders */
    padding-left: 0;       /* remove extra padding */
    flex-direction: row;   /* remove vertical stack */
    align-items: center;   /* center vertically */
    width: auto;           /* no fixed width */
    margin: 0 0 1rem 0;             /* reset margins */
  }

  .nav-links .toc-item:first-child { padding-left: 0; }
  .nav-links .toc-desc { display: none; }
  .nav-links .toc-item a { margin-bottom: 0; }
	
/* iPad: Introduction */
	
	.introduction-txt { font-size: 1.6rem; line-height: 1.1; max-width: 420px; }
	
/* iPad: Showreel */
	
  	.sr-thumbs { padding-left: 0; scroll-padding-inline-start: 0;  scroll-snap-type: none; }
  	.sr-thumb { scroll-snap-align: none; }
	
	#showreel .sr-nav { position: relative; top: -12px; }

/* iPad: Testimonials */

  	.tst-grid { grid-template-columns: 1fr 1fr; }
  	.panel { aspect-ratio: 1 / 1; }

	.panel-left .quote { 
		font-size: 1.6rem;
		padding-right: 60px;
	}
	
/* iPad: Clients */	
	
	.client-name { font-size: 1.6rem; }
	
/* iPad: Expertise */	
	
   	.expertise-tables {grid-template-columns: repeat(2, 1fr);}
	.expertise-introduction {
  	font-size: 1.6rem; line-height: 1.1; max-width: 420px;}
	.expertise-cell { padding: 0 20px 0 0; }
  	.expertise-tables { row-gap: 20px; }
	
}

/* iMac */
/* large: 4 in a row */
@media (min-width: 1200px) {
	
/* iMac: Introduction */
	
	.introduction-txt { font-size: 2rem; line-height: 1.1; max-width: 520px;}	
	
/* iMac: Testimonials */
	
	.tst-grid { grid-template-columns: 1fr 1fr; }
	.panel { aspect-ratio: 1 / 1; }
	.panel-left .quote { font-size: 2rem;  }
	.panel-left .quote { padding-right: 120px;}
	
/* iMac: Clients */
	
	.client-name { font-size: 2rem; }
	
/* iMac: Expertise */
	
  	.expertise-tables { grid-template-columns: repeat(4, 1fr);}
	.expertise-introduction { font-size: 2rem; line-height: 1.1; max-width: 520px;}
	
}