/*========================================================
  Resets
  ========================================================*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
/*
 1. Remove iOS tap highlight to prevent entire container being highlighted
 2. Stops Mobile Safari from auto-adjusting font-sizes on device orientation change, without disabling user zoom
*/
html {
	overflow-y: scroll; 
	box-sizing: border-box;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body {
	font-size: 100%;
	line-height: 1.5rem;
	color: rgb(59, 65, 79);
	font-family: "rooney-web", "times-new-roman", serif;
	font-weight: 400;
	text-align: left;
	background: #ffffff;
	width: 100%;
}
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video
{display: block;}

table {border-collapse: collapse; border-spacing: 0;}
ol, ul {list-style: none;}
dd {margin: 0 0 0 40px;}

/*========================================================
  Basic: Colors; Links
  ========================================================*/

::selection 	 	{background: rgb(174,237,244);}
body {-webkit-tap-highlight-color: rgb(174,237,244);}

a{ font-weight:700;}
a:link, a:visited {
	text-decoration: none;
	color: #122E56;
}
a:hover, a:focus, a:active {
	text-decoration: none;
	color: rgb(85,169,216);
}
a[href$=".pdf"]:link, a[href$=".pdf"]:visited{
	background: url(../graphics/pdf.png) right top no-repeat;
	padding-right: 1.5rem;
}
a[href$=".pdf"]:hover, a[href$=".pdf"]:focus, a[href$=".pdf"]:active{
	background: url(../graphics/pdf.png) right -1.375rem no-repeat;
	padding-right: 1.5rem;	
}
a[href^="http:"]:link, a[href^="http:"]:visited{
	background: url(../graphics/external-link.png) right top no-repeat;
	padding-right: 1.25rem;
}
a[href^="http:"]:hover, a[href^="http:"]:focus, a[href^="http:"]:active{
	background: url(../graphics/external-link.png) right -1.25rem no-repeat;
	padding-right: 1.25rem;
}
/* reset the "external-link.png" in ABOUT page*/
#about a[href^="http:"]:link, #about a[href^="http:"]:visited{
	background: none;
}
#about a[href^="http:"]:hover, #about a[href^="http:"]:focus, #about a[href^="http:"]:active{
	background: none;
}
/* ------ non-linkable link ------ */
p.email{
	background: url(../graphics/email.png) left 0.75rem no-repeat;
}

/*========================================================
  Basic: Embedded content
  ========================================================*/

a img {
	border: 0; 
	vertical-align: text-bottom;
}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
/* Correct overflow displayed oddly in IE9 */
svg:not(:root) {overflow: hidden;}

/*========================================================
  Basic: Typography
  ========================================================*/

h1, h2, h3, h4, h5, h6{
	display: block;
}

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1rem 2.5rem; }

dfn { font-style: italic; }

hr { display: block; height: 0.0625rem; border: 0; border-top: 0.06 solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1rem; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5rem; }
sub { bottom: -0.25rem; }

q:before, q:after {content:'';}

/* ------------------------------------------------------------------
p - font-size boilerplate - text page */	

.huge, h1 {
	font-size: 3rem;
	line-height: 1.5rem;
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
}
.large, h2 {
	color: #0C336E;
	text-align: center;
	vertical-align: center;
	font-size: 2.25rem;
	line-height: 5rem;
	font-weight: 700;
	font-family: "rooney-web", georgia, serif;	/* Figma H2 = Arvo */
}
.bigger, h3 {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	font-family: "rooney-web", georgia, serif;
}
.big, h4 {
	font-size: 1.25rem;
	line-height: 1.5rem;
}
.small, small {
	font-size: 0.75rem;
	line-height: 1.25rem;
}

/*  ========================================================
	BASE STYLES
	======================================================== */
p{ 
	font-size: 1rem;
	line-height: 1.5rem;
}

p.bold {
	font-weight: 700;
}

/* Figma text style: Body.number-eyebrow — label above each stat in "In Numbers" */
p.number-eyebrow {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;		/* 20px */
	line-height: 1.5rem;		/* 24px */
	color: #72767E;
	text-transform: capitalize;
}

li{ 
	line-height:1.75rem
}


/*  ========================================================
	========================================================
  	Media: barebone & mobile first
  	========================================================
	======================================================== */

/* ------------------------------------------------------------------
	Layout: templates and foundationn */

body{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
}
/* ------------------------------------------------------------------ 
	Layout - main areas */
header.page-width, 
#nav,
#page-title, 
#cards, 
#works-list,
#statement, #about-content,
.page-width, 
footer.page-width{
	display: flex;
	width: 100vw;
	margin: 0 auto;
	/* test end, used for testing background-color: rgb(235, 235, 235);*/
}
header #nav{
	width: 100vw;
	flex-flow: row nowrap;
	justify-content: space-between;
	background-color: rgb(255,255,255, .3);
}
header #nav h1 a{
	float: right;
}
header #page-title{
	flex-grow: 1;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding-bottom: 0.5rem;
}
/* main content area : homepage, works */
#cards{
	flex-flow: column nowrap;
}
#works-list{
	flex-flow: column nowrap;
	justify-content: center;
	max-width: 1432px;
}
footer.page-width{
	justify-content: space-between;
}

/* -----------------------------------------------------
	Header  : background image */
header{
	flex-flow: column nowrap;
	height: 100vh;
	width: auto;
}
header div#bg-img{
	border:0;
	border-color: rgb(255,255,255, 0);
}
header div#bg-img{
	opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
	background: url(../img/cover-banner.jpg) center no-repeat;
	background-size: cover;
	height: 100%;
	width: auto;
}
header div#bg-img::before{
	display: block;
	background: linear-gradient(-45deg, #D8F0F3, #F4EED7, #D9F2EF, #F9DDC8);
	background-size: 400% 400%;
	animation: bg-gradient 10s ease infinite;
	height: 100vh;
}
@keyframes bg-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
#works header{
	background: url(../graphics/bg-leaderboard-int.jpg) top left;
}
#about header{
	background: url(../graphics/bg-leaderboard-pho.jpg) top left;
}
#booking header{
	background: url(../graphics/bg-leaderboard-des.jpg) top left;
}
#four-o-four header{
	background: url(../graphics/bg-leaderboard.jpg) top left;
}
#works header div#bg-img, #about header div#bg-img, #booking header div#bg-img{
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 100%;
  z-index: -1;
}

/* ------------------------------------------------------------------
	Header : H1 and Navigation  */
.site-logo #h1-name{
	display:none;
}
header .site-logo{
	display: flex;
	flex-flow: row nowrap;
	gap: 1rem;
}
header img#graphic{
	width: 2.5rem;
	height: 2.5rem;
	margin-right:0.5rem;
}
header img#name{
	height: 2.5rem;
	display: none;
}
header .site-logo{
	width: 40%;
	font-family: "rooney-web", "times-new-roman", serif;
}
header .site-logo a{
	padding: 0.5rem 0.5rem 0.125rem;
}
header .site-logo a:hover{
	background-color: #122E56;
}
header .site-logo a:hover img{
	filter: invert(93%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%);
}
#main-nav{
	text-align: center;
	padding: 0 0.75rem;
}

#main-nav ul{
	margin: 0.5rem 0;
	display: flex;
	gap: 0.75rem;
	flex-flow: row nowrap;
	align-items: center;
}
#main-nav li{
	height: auto;
}
/* inline-flex on EVERY item, not just the one with an icon: mixing an
   inline-flex anchor in with plain inline ones gives them different
   heights and drops the odd one 2px off the row. */
#main-nav a{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;				/* 8px - only bites when there is an icon */
	font-size: 1.125rem;			/* 18px - one nav size sitewide */
	line-height: 1.5rem;
	padding: 0.375rem 0.5rem 0.5rem;
}
#main-nav a:hover, #main-nav a:focus, #main-nav a:active{
	color: #fff;
	background: #122E56;
}
/* The booking link carries an icon, same as the homepage nav. The .nav-cta
   rules over in the 2026 block are scoped to #home, so the shape is restated
   here for the legacy header rather than widening those selectors. */
#main-nav .nav-cta .nav-icon {
	flex: none;
	display: block;
	width: 1.125rem;			/* 18px */
	height: 1.125rem;
	position: relative;
	top: -0.0625rem;			/* 1px - optical, see the homepage note */
}
/* navy line art on a navy hover fill would disappear */
#main-nav .nav-cta:hover .nav-icon,
#main-nav .nav-cta:focus .nav-icon {
	filter: invert(100%) brightness(200%);
}
#home header{
	margin-bottom: 1rem;
}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : homepage */

#page-title h1{
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	max-width: 100%;
	margin: 0 auto;
}
/*   homepage    */
#head0, #head1, #head2, #head3, #head4{
	display: flex;

	font-size: clamp(
    var(--min-font-size), 
    var(--ratio), 
    var(--max-font-size)
  );
}
#page-title #head0{
}
#page-title #head1{
}
#page-title #head2{
}
#page-title #head3{
}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : other pages*/

#page-title {
  /* Establishes this element as a container for inline-size (width) queries */
  container-type: inline-size;
  
  /* Optional: give the container a name for targeted queries */
  container-name: title-header;
}

#page-title h1 {
  /* Page titles are the <h1> of their page now, styled like the homepage
     hero: museo-slab at 700 - a weight the kit actually ships, so this
     renders exactly rather than falling back. line-height has to be
     restated because the base ".huge, h1" rule sets 1.5rem, which would
     crush an 80px title. */
  font-family: "museo-slab", Arvo, helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.08;			/* matches the homepage hero */

  --min-font-size: 3rem;
  --max-font-size: 5rem;
  --ratio: 10cqi;

  font-size: clamp(
    var(--min-font-size), 
    var(--ratio), 
    var(--max-font-size)
  );
}

/* ------------------------------------------------------------------
	Homepage : main content layout */

article.card, a.card, .card-content, .card-content p.small{
	display: flex;
	width: 100%;
}
.card-content h3, .card-content p{
	display: flex;
}
article.card{
	padding: 1rem;
	/* background-color: rgb(100, 100, 120, 1.0); */
}
a.card{
	width: 100%;
	height: 100%;
	padding: 1rem;
	flex-flow: column nowrap;
	color: rgb(102, 98, 84);
	font-weight: 400;
	border-radius: 0.5rem;
}
.card-content{ /*box-sizing in border-box mode */
	width: 100%;
	flex-flow: column nowrap;
	align-items: stretch;
}
.card-content h3{
	color: #0C336E;
	flex-basis: 100%;
	min-height: 6rem;
	align-items: center;
	margin: 0 0 0 4.5rem;
	font-size: 1.75rem;
	line-height: 2rem;
	text-align: left;
	padding: 1rem 0 1rem;
}
.card-content p{
	font-size: 1.125rem;
	line-height: 1.75rem;
}
p.small{
	margin-top: 1rem;
	padding: 0;
	text-transform: uppercase;
}
p.small img{
	width: 1rem;
	height: 1rem;
}
p.small img{
	filter: invert(35%) sepia(7%) saturate(1847%) hue-rotate(188deg) brightness(94%) contrast(87%);
}
#card-1 .card-content{ background: url(../graphics/geodesic-1.svg) no-repeat;}
#card-2 .card-content{ background: url(../graphics/geodesic-2-model-design.svg) no-repeat;}
#card-3 .card-content{ background: url(../graphics/geodesic-3-measurable.svg) no-repeat;}
#card-4 .card-content{ background: url(../graphics/geodesic-4-system-design.svg) no-repeat;}
#card-5 .card-content{ background: url(../graphics/geodesic-5-ui.svg) no-repeat;}
#card-6 .card-content{ background: url(../graphics/geodesic-6-service-design.svg) no-repeat;}
#card-1 .card-content, #card-2 .card-content, #card-3 .card-content, #card-4 .card-content, #card-5 .card-content, #card-6 .card-content{ 
	background-position: -0.25rem 1rem;
	background-size: 4rem 4rem;
}

/* Card link style : restrain height for gradient animation to work */
#cards a.card{
	height: inherit;
	overflow: hidden;
}
/* Card link style : box shadow */
#cards a.card:link, #cards a.card:visited{
	border: 0.0625rem solid #E7EAEE;
	background: linear-gradient(30deg, #EEF5F6 0%, #EDF7F8 30%, #F1F6EF 90%);
	/* background-color: #f8fcfc; */
}
/* Card link style : gradient animation */
#cards a.card:hover, #cards a.card:focus, #cards a.card:active{
	/*box-shadow: 0.125rem 0.125rem 0 #bbb;*/
	border-color: #bbb;
	cursor: default;
	background: linear-gradient(30deg, #F9DDC8, #9DD0D7, #F4EED7, #C5EBF7);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
	/* background-color: #E7F5F7; */
}
a.card .card-content p{
	color:#2D2B25;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* -----------------------------------------------------
	Modify : Works page */

#works-list{
	margin: 1rem 0;
	padding: 0 1rem;
}
#works-list article{
	display: flex;
	flex-flow: column nowrap;
	margin-bottom: 1.5rem;
}
#works-list section.title{
	background: none;
	padding: 0;
	margin-bottom: 0.5rem;
}
.port-work{ /*.card in home page template: box-sizing in border-box mode*/
	padding: 0.5rem;
}
.port-work h3{
	color: #0C336E;
	font-size: 2rem;
	padding: 1rem 0;
	margin: 0 0 0.25rem;
}
/* Figma: tag chip — 12/17, 4px 10px padding, 4px radius, 8px gap */
.port-work small{
	display: inline-block;
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 0.75rem;		/* 12px */
	line-height: 1.0625rem;		/* 17px */
	color: #2D2B25;
	padding: 0.25rem 0.625rem;	/* 4px 10px */
	margin: 0 0.5rem 0.5rem 0;	/* 8px gap, wraps cleanly */
	border-radius: 0.25rem;
}
.port-work small.strategy{ background-color: #AFDAF8;}
.port-work small.structure{ background-color: #FFE8A3;}
.port-work small.surface{ background-color: #B6E2C5;}
.port-work small.marketing{ background-color: #F4BCA4;}
/*
#works .port-work small{background-color: rgb(211, 226, 186);}
#design .port-work small{background-color: rgb(246, 188, 147);}
*/
.port-work p{
	margin: 0.25rem 0 0.5rem;
}
figure{
	border-style: solid;
	border-width: 0.0625rem;
	border-color: #E7EAEE;
	/*
	background-color: rgb(190, 190, 190);
	*/
	padding: 0.125rem;
	border-radius: 0.5rem;
	overflow: hidden;
}
figure img{
	width: 100%;
	border-radius: 0.5rem;
}


/* -----------------------------------------------------
	Modify : ABOUT page */
#about, 
#about section#about-content{
	flex-flow: column nowrap;
	align-items: center;
}
#about #card-1, #about #card-2, #about #card-3{
	flex-flow: column nowrap;
	flex-basis: 80%;
}
/*  About page - text styles
	remove the background image of card */
#about #card-1 .card-content, #about #card-2 .card-content, #about #card-3 .card-content{
	background-image: none;
}

#about #statement{
	display: inline-block;
	padding: 0 1rem;
	margin: 3rem auto;
	background: url(../graphics/quote.gif) 1rem 0rem no-repeat;
}
#about #statement p:first-child{
	margin-left: 6rem;
}
#about #statement p{
	flex-basis: 100%;
	font-size: 1rem;
	line-height: 1.5rem;
	padding: 0 1rem 1rem 1rem;
}
#about div.card-content{
	flax-basis: 90%;
	margin: 0 auto;
}
#about div.card-content p, #about div.card-content ul{
	width: 100%;
	overflow: hidden;
	*behavior: url(/script/boxsizing.htc);
}
#about div.card-content h3{ /* overwrite .card-content h3 */
	width: 100%;
	justify-content: center;
	text-align: center;
	margin:0;
	border-top-style: double;
	border-top-color: rgb(78,96,147);
	border-top-width: 0.25rem;
}
#about .card-content h3{
	color: #0C336E
}
#about #statement, #about .card-content{
	color: rgb(102, 98, 84);
}
#about .card-content span{
	color: rgb(145, 145, 135);	
}
#about .card-content a{
	font-weight: 400;
}
.subhead{
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.75rem 0;
}
.dash-line{
	padding: 0.5rem 0 0.5rem 3rem;
}
#about .card-content p.email{
	padding-left: 2rem;
	margin-bottom: 0rem;
}
.card-content p:first-child{
	padding-top: 8px;
}

/* -----------------------------------------------------
   Modify : Booking page embedding */


/* -----------------------------------------------------
   Modify : 404 page */
#four-o-four #main-content-area{
	flex-flow: column nowrap;
	width: 80%;
	margin: 4rem auto 1rem;
	gap: 2rem;
}
#four-o-four ul.unicode-bullet li:before{
	content: "\00BB \0020";
}

/* ------------------------------------------------------------------
	Footer : all pages */
footer{
	padding: 1rem 0 2rem;
}

footer p{
	font-size:0.875rem;
	padding: 0.75rem;
}
p#footer-cr{ 
	float: left;
}
p#footer-nav{
	float: right;
	text-align: right;
}
/* need further testing to make its hover event consistent with the page top #main-nav 
*/
#footer-nav a{
	padding: 0.25rem 0.5rem;
}
span.mobile-hide{
	display: none;
}
#footer-nav a:hover, #main-nav-bottom a:focus, #main-nav-bottom a:active{
	color: #fff !important;
	background: rgb(78,96,147) !important;
}



/*  ========================================================
	========================================================
	Media: screen, min-width: 480px, max-width: 767px;
	Gutters: 24px / 1.5rem
	Outer margins: 16px / 1rem
	------------------------------------------------------
	Wide mobile layout, high resolution mobile devices  	
	========================================================
	======================================================== */
@media only screen 
and (min-width: 480px) 
and (max-width: 767px) {

/* ------------------------------------------------------------------ 
	Layout - main areas */


/* ------------------------------------------------------------------
	Header : H1, Navigation, H2  */
	header img#name{
		height: 2.5rem;
		display: none;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : homepage */

	#page-title h1{
		line-height: 1.08;	/* was 10rem - a 160px line box on a 48px title */
	}
	#page-title #head0{
		font-size: 3.5rem;
		line-height: 4rem;
		padding: 1rem 0 2rem;
	}
	#page-title #head1{
		font-size: 3.5rem;
		line-height: 4rem;
		padding-top: 1rem;
	}
	#page-title #head2{
		font-size: 1.5rem;
		line-height: 2rem;
	}
	#page-title #head3{
		font-size: 3.5rem;
		line-height: 4rem;
		padding-bottom: 0.5rem;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : other pages */
	#page-title h1{
		line-height: 1.08;	/* was 5rem - left over from the old h2 sizing */
	}

/* ------------------------------------------------------------------
	Homepage : main content layout */	
	a.card{
		padding: 1rem 2rem 1.5rem;
	}
	.card-content h3{
		font-size: 2.5rem;
		line-height: 2.75rem;
		text-align: left;
		padding: 0.5rem 0 1rem;
	}

/* -----------------------------------------------------
	Modifications : ABOUT page 
   	No background image as homepage, so the text-indent is reset here */

	#about #statement{
		width: 80%;
		margin: 4rem auto 2rem;
		background: url(../graphics/quote-small.gif) 2rem 1rem no-repeat;
	}
	#about #statement p:first-child{
		margin-left: 4rem;
	}
	#about #statement p{
		flex-basis: 100%;
		font-size: 1.125rem;
		line-height: 1.75rem;
		padding: 0 1rem 1rem 1rem;
	}
	#about .card-content h3{
		padding: 2rem 0;
	}
}



/*  ========================================================
	========================================================
	Media: screen, min-width: 768px, max-width:900
	Gutters: 24px / 1.5rem
	------------------------------------------------------
	old desktop / laptop display  	
	========================================================
	======================================================== */

@media only screen 
and (min-width: 768px) 
and (max-width: 900px){
/* ------------------------------------------------------------------
	Layout: templates and foundation */

	header.page-width, #about .page-width, #page-title{
		width: 100vw;
	}
	#cards{
		width: 80vw;
	}
	#works-list{
		width: 90vw;
	}
	.page-width{
		width: 80vw;
	}

/* ------------------------------------------------------------------ 
	Layout - main areas */
	header, #about header.page-width{
		height: 25.125rem; /* #nav: 50px high, #page-title: 12rem high and viewport dependant */
	}
	header{
		width: 100vh;
	}
	header img, header div#bg-img{
		border:0;
		border-color: rgb(255,255,255, 0);
	}
	header div#bg-img{
		width: 100vw;
		height:25.125rem;
	}
	header #page-title{
		height: 21rem;
		justify-content: center;
		align-items: center;
		padding-bottom: 0.5rem;
		border: 0;
	}

/* ------------------------------------------------------------------
	Header : H1, Navigation, H2  */
	header #nav{
		padding: 0.5rem 1rem;
	}
	header #nav h1 a{
		float: right;
	}
	header img#graphic, header img#name{
		display: inline-block;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : homepage */
	#page-title #head0{
		display: none;
	}
	#page-title #head1{
		font-size: 3.5rem;
		line-height: 3.5rem;
		padding-top: 0.5rem;
	}
	#page-title #head2{
		font-size: 2rem;
		line-height: 1rem;
	}
	#page-title #head3{
		font-size: 3.5rem;
		line-height: 3.25rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
/* ------------------------------------------------------------------
	Leaderboard fonts sizing : other pages */

/* ------------------------------------------------------------------
	Homepage : main content layout */	
	a.card{
		padding: 1rem 2rem 2rem;
	}
	.card-content h3{
		font-size: 2.5rem;
		line-height: 2.5rem;
		padding: 0.5rem 0 1rem;
	}

/* -----------------------------------------------------
	Modify : Works page 
   	No background image as homepage, so the text-indent is reset here */
	
	#works-list{
		justify-content: center;
		margin: 2rem auto;
	}
	#works-list article{
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 3rem;
	}

/* -----------------------------------------------------
	Modify : ABOUT page 
   	No background image as homepage, so the text-indent is reset here */

	#about #statement, #about #about-content{
		width: 80%;
		margin: 3rem auto 0;
		padding: 0 1rem;
	}
	#about #statement{
		background: url(../graphics/quote-small.gif) 2rem 0.5rem no-repeat;
	}
	#about #statement p:first-child{
		margin-left: 4rem;
	}
	#about #statement p{
		flex-basis: 100%;
		font-size: 1.125rem;
		line-height: 1.75rem;
		padding: 0 1rem 1rem 1rem;
	}
	#about article.card{
		width: 100%;
	}
	#about div.card-content{
		flax-basis: 100%;
		padding: 0;
		margin: 0 auto;
	}
	#about div.card-content p, #about div.card-content ul{
		width: 100%;
	}
	#about div.card-content h3{
		padding: 2rem 0;
	}
}



/*  ========================================================
	========================================================
	media: screen, min-width: 900px, max-width:1023
	Gutters: 24px / 1.5rem
	------------------------------------------------------
	Old desktop and laptop display
	------------------------------------------------------
	.card becomes float	
	========================================================
	======================================================== */

@media only screen 
and (min-width: 900px) 
and (max-width: 1023px){
/* ------------------------------------------------------------------
	Layout: templates and foundation */
	header.page-width, #about .page-width, #nav, #page-title{
		width: 100vw;
	}
	#cards{
		width: 100vw;
		flex-flow: row wrap;
		align-items: stretch;
		margin: 1rem auto;
	}
	#works-list{
		width: 90vw;
	}
	.page-width{
		width: 80vw;
	}

/* ------------------------------------------------------------------ 
	Layout - main areas */

	header, #about header.page-width{
		height: 28.125rem; /* #nav: 50px high, #page-title: 12rem high and viewport dependant */
	}
	header #page-title{
		height: 24rem;
		justify-content: center;
		align-items: center;
		padding-bottom: 0.5rem;
	}

/* ------------------------------------------------------------------
	Header : H1, Navigation, H2  */
	header{
		width: 100vh;
		height: auto;
	}
	#home header, #home header img, #home header div#bg-img{
		border:0;
		border-color: rgb(255,255,255, 0);
	}
	header div#bg-img{
		width: 100vw;
		height:28.125rem;
	}
	header #nav{
		padding: 0.5rem 1rem;
	}
	header #nav h1 a{
		float: right;
	}
	header img#graphic, header img#name{
		display: inline-block;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : homepage */

	#page-title #head0{
		display: none;
	}
	#page-title h1{
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}
	#page-title #head1, #page-title #head2, #page-title #head3{
		display: flex;
		flex-flow: row nowrap;
		font-size: 3.5rem;
		font-kerning: normal;
		letter-spacing: -0.05rem;
		line-height: 4rem;
		margin-top:-0.5rem;
		padding: 0;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : other pages */

/* ------------------------------------------------------------------
	Homepage : main content layout */

	article.card{ 
		padding:0.5rem;
		flex-basis: 33%;
	}
	a.card{
		padding: 1rem 2rem 2rem;
		justify-content: space-between;
	}
	#about .card-content h3{
		width: 80%;
		justify-content: center;
		font-size: 2.5rem;
		line-height: 5rem;
		padding: 0 0 1rem;
	}

/* -----------------------------------------------------
	Modify : Works page 
   	No background image as homepage, so the text-indent is reset here */
	#works-list{
		justify-content: center;
		margin: 2rem auto;
	}
	#works-list article{
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 3rem;
	}

/* -----------------------------------------------------
	Modify : ABOUT page 
   	No background image as homepage, so the text-indent is reset here */

	#about #statement, #about section#about-content{
		width: 80%;
		margin: 3rem auto 2rem;
	}
	#about #statement{
		background: url(../graphics/quote-small.gif) 2rem 0.5rem no-repeat;
	}
	#about #statement p:first-child{
		margin-left: 4rem;
	}
	#about #statement p{
		flex-basis: 100%;
		font-size: 1.25rem;
		line-height: 1.75rem;
		padding: 0 1rem 1rem 1rem;
	}
	#about #card-1, #about #card-2, #about #card-3{
		margin-bottom: 3rem;
	}
	#about div.card-content{
		align-items: center;
		flax-basis: 90%;
		margin: 0 auto;
	}
	#about div.card-content p, #about div.card-content ul{
		width: 100%;
		overflow: hidden;
		*behavior: url(/script/boxsizing.htc);
	}
	#about .card-content h3{
		padding: 2rem 0;
	}
	#about .card-content p.chy-photo img{
		width: 60%;
	}
}



/*  ========================================================
	========================================================
	media: screen, width:; 1024 and wider
	----------------------------------------------------
	Laptop and small desktop
	========================================================
	======================================================== */

@media only screen 
 and (min-width: 1024px) 
 and (max-width: 1279px) {
/* ------------------------------------------------------------------
	Layout: templates and foundation */ 
	header.page-width, #about .page-width, #nav, #page-title{
		width: 100vw;
	}
	#cards{
		width: 100vw;
		flex-flow: row wrap;
		align-items: stretch;
		margin: 1rem auto;
		padding: 0 1rem;
	}
	#works-list{
		width: 90vw;
	}
	.page-width{
		width: 80vw;
	}

/* ------------------------------------------------------------------
	Homepage : main content layout */

	article.card{ 
		padding:0.5rem;
		flex-basis: 33.3333%;
	}
	a.card{
		padding: 1rem 2rem 2rem;
		justify-content: space-between;
	}
	.card-content{
		align-items: center;
	}
	.card-content h3{
		min-height: 6rem;
		align-items: center;
		font-size: 2rem;
		line-height: 2.25rem;
		text-align: center;
		margin: 12rem 0 0 0;
		padding: 0.5rem 0 0.5rem;
	}
	#card-1 .card-content, #card-2 .card-content, #card-3 .card-content, #card-4 .card-content, #card-5 .card-content, #card-6 .card-content{ 
		background-position: center 0.5rem;
		background-size: 12rem 12rem;
	}

/* ------------------------------------------------------------------ 
	Layout - main areas */

	header, #about header.page-width{
		height: 28.125rem; /* #nav: 50px high, #page-title: 12rem high and viewport dependant */
	}
	header #page-title{
		height: 24rem;
		justify-content: center;
		align-items: center;
		padding-bottom: 0.5rem;
	}

/* ------------------------------------------------------------------
	Header : H1, Navigation, H2  */
	header{
		width: 100vh;
	}
	#home header, #home header img, #home header div#bg-img{
		border:0;
		border-color: rgb(255,255,255, 0);
	}
	header div#bg-img{
		width: 100vw;
		height:28.125rem;
	}
	header #nav{
		padding: 1rem 5vw;
	}
	header #nav h1 a{
		float: right;
	}
	header img#graphic, header img#name{
		display: inline-block;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : homepage */
	#page-title, #page-title h1{
		flex-flow: row nowrap;
		justify-content: center;
	}
	#page-title #head0{
		display: none;
	}
	#page-title #head1, #page-title #head2, #page-title #head3{
		font-size: 4rem;
		line-height: 4.5rem;
		padding-top: 0.5rem;
	}
	#page-title h1{
		letter-spacing: -0.1rem;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : other pages */

/* -----------------------------------------------------
	Modify : Works page 
   	No background image as homepage, so the text-indent is reset here */
	
	#works-list{
		justify-content: center;
		margin: 2rem auto;
	}
	#works-list article{
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 5rem;
	}

/* -----------------------------------------------------
	Modify : ABOUT page 
   	No background image as homepage, so the text-indent is reset here */

  #about #statement{
 		width: 70%;
		margin: 3rem auto 2rem;
		background: url(../graphics/quote-small.gif) 2rem 0.5rem no-repeat;
	}
 	#about #about-content{
		width: 70%;
	}
	#about #statement p:first-child{
		margin-left: 4rem;
	}
	#about #statement p{
		text-align: left;
		flex-basis: 100%;
		font-size: 1.25rem;
		line-height: 1.75rem;
		padding: 0 1rem 1rem 1rem;
	}

	#about #about-content #card-1, #about #about-content #card-2, #about #about-content #card-3{
		flex-basis: 33%;
	}
	#about div.card-content{
		align-items: center;
		flax-basis: 90%;
		margin: 0 auto;
	}
	#about div.card-content p, #about div.card-content ul{
		width: 100%;
		overflow: hidden;
		*behavior: url(/script/boxsizing.htc);
	}
	#about .card-content h3{
		width: 80%;
		justify-content: center;
		font-size: 2.5rem;
		line-height: 5rem;
	}
	#about .card-content p.chy-photo{
		padding: 0.5rem 1rem;
	}
	#about .card-content p.chy-photo img{
		width: 90%;
	}

}

/*  ========================================================
	========================================================
	Media: screen, width:; 1280 and wider
	----------------------------------------------------
	Modern desktop
	========================================================
	======================================================== */

@media only screen 
 and (min-width: 1280px) {
/* ------------------------------------------------------------------
	Layout: templates and foundation */ 
	header.page-width, #about .page-width, #nav, #page-title{
		width: 100vw;
	}
	footer.page-width, #about footer.page-width{
		width: 90vw;
	}
	#cards{
		width: 90vw;
		flex-flow: row wrap;
		align-items: stretch;
		margin: 1rem auto;
	}
	.page-width, #works-list{
		width: 80%;
	}
	#four-o-four #main-content-area{
		width: 60%;
	}

/* ------------------------------------------------------------------
	Homepage : main content layout */

	article.card{ 
		padding: 1rem;
		flex-basis: 33.3%;
	}
	a.card{
		padding: 1.5rem 1.5rem 2rem;
		justify-content: space-between;
	}
	.card-content{
		align-items: center;
	}
	.card-content h3{
		min-height: 6rem;
		align-items: center;
		font-size: 2.1rem;
		line-height: 2.5rem;
		letter-spacing: -0.1rem;
		vertical-align: middle;
		text-align: center;
		margin: 14rem 0 0 0;
		padding: 0.5rem 0 0.5rem;
	}
	#card-1 .card-content, #card-2 .card-content, #card-3 .card-content, #card-4 .card-content, #card-5 .card-content, #card-6 .card-content{ 
		background-position: center 0.5rem ;
		background-size: 14rem 14rem;
	}
/* ------------------------------------------------------------------ 
	Layout - main areas */

	header, #about header.page-width{
		height: 34.125rem; /* #nav: 50px high, #page-title: 12rem high and viewport dependant */
	}
	#home header, #home header img, #home header div#bg-img{
		border:0;
		border-color: rgb(255,255,255, 0);
	}
	header div#bg-img{
		width: 100vw;
		height:34.125rem;
	}
	header #page-title{
		height: 30rem;
	}
/* ------------------------------------------------------------------
	Header : H1, Navigation, H2  */
	header #nav{
		padding: 1rem 5vw;
	}
	header #nav h1 a{
		float: right;
	}
	header img#graphic, header img#name{
		display: inline-block;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : homepage */

	#page-title, #page-title h1{
		flex-flow: row nowrap;
		justify-content: center;
	}
	#page-title #head0{
		display: none;
	}
	#page-title #head1, #page-title #head2, #page-title #head3{
		font-size: 4rem;
		line-height: 4.5rem;
		padding-top: 0.5rem;
	}
	#page-title h1{
		letter-spacing: 0rem;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : other pages */

/* -----------------------------------------------------
	Modify : Works page 
   	No background image as homepage, so the text-indent is reset here */
	
	#works-list{
		justify-content: center;
		margin: 2rem auto;
	}
	#works-list article{
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 6rem;
	}

/* -----------------------------------------------------
	Modify : ABOUT page 
   	No background image as homepage, so the text-indent is reset here */

  #about #statement{
 		width: 70%;
		margin: 3rem auto;
		padding-top: 0.5rem;
		background: url(../graphics/quote-small.gif) 2rem 0rem no-repeat;
	}
	#about #about-content{
		width: 70%;
	}

	#about #statement p:first-child{
		margin-left: 4rem;
	}
	#about #statement p{
		flex-basis: 100%;
		font-size: 1.25rem;
		line-height: 1.75rem;
		padding: 0 1rem 1rem 1rem;
	}
	#about #card-1, #about #card-2, #about #card-3{
		margin: 2rem 0;
	}
	#about .card-content h3{
		width: 80%;
		justify-content: center;
		font-size: 3rem;
		line-height: 6rem;
		text-align: left;
		margin: 0;
		padding: 1rem 0 2rem;
	}

	#about .card-content p.chy-photo{
		padding: 0.5rem 1rem;
	}
	#about .card-content p.chy-photo img{
		width: 90%;
	}

}


/*  ========================================================
	========================================================
	Media: screen, width:; 1600 and wider
	----------------------------------------------------
	Wide screens
	========================================================
	======================================================== */

@media only screen 
  and (min-width: 1600px) {
/* ------------------------------------------------------------------
	Layout: templates and foundation */ 

	header.page-width, #about .page-width, #nav, #page-title{
		width: 100vw;
	}
	footer.page-width, #about footer.page-width{
		width: 90vw;
	}
	#cards{
		width: 90vw;
		flex-flow: row wrap;
		align-items: stretch;
		margin: 1rem auto;
	}
	.page-width{
		width: 80%;
	}
	#works-list{
		width: 70%;
	}
	#four-o-four #main-content-area{
		width: 50%;
	}

/* ------------------------------------------------------------------
	Homepage : main content layout */

	article.card{ 
		padding: 1rem;
		flex-basis: 33.3%;
	}
	a.card{
		padding: 2rem 2rem 3rem;
		justify-content: space-between;
	}
	.card-content{
		align-items: center;
	}
	.card-content h3{
		min-height: 7rem;
		align-items: center;
		font-size: 2.5rem;
		line-height: 2.75rem;
		letter-spacing: 0rem;
		vertical-align: middle;
		text-align: center;
		margin: 16rem 0 0 0;
		padding: 0.5rem 0 0.5rem;
	}

	#card-1 .card-content, #card-2 .card-content, #card-3 .card-content, #card-4 .card-content, #card-5 .card-content, #card-6 .card-content{ 
		background-position: center -0.5rem ;
		background-size: 17rem 17rem;
	}	

/* ------------------------------------------------------------------ 
	Layout - main areas */
	header{
		height: 34.125rem; /* #nav: 50px high, #page-title: 12rem high and viewport dependant */
	}
	#home header, #home header img, #home header div#bg-img{
		border:0;
		border-color: rgb(255,255,255, 0);
	}
	header div#bg-img{
		width: 100vw;
		height:34.125rem;
	}
	header #page-title{
		height: 30rem;
	}

/* ------------------------------------------------------------------
	Header : H1, Navigation, H2  */
	header #nav{
		padding: 1rem 5vw;
	}
	header #nav h1 a{
		float: right;
	}
	header img#graphic, header img#name{
		display: inline-block;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : homepage */
	
	#page-title, #page-title h1{
		flex-flow: row nowrap;
		justify-content: center;
	}
	#page-title #head1, #page-title #head2, #page-title #head3{
		font-size: 5rem;
		line-height: 10rem;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : other pages */

/* -----------------------------------------------------
	Modify : Works page 
   	No background image as homepage, so the text-indent is reset here */
	.port-work h3{
		font-size: 2.5rem;
	}
	#works-list{
		justify-content: center;
		margin: 2rem auto;
	}
	#works-list article{
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 6rem;
	}

/* -----------------------------------------------------
	Modify : ABOUT page 
   	No background image as homepage, so the text-indent is reset here */

  #about #statement{
 		width: 60%;
		margin: 3rem auto;
		padding-top: 0.5rem;
		background: url(../graphics/quote-small.gif) 2rem 0 no-repeat;
	}
	#about section#statement p:first-child{
		margin-left: 4rem;
	}
	#about #statement p{
		flex-basis: 100%;
		font-size: 1.25rem;
		line-height: 1.75rem;
		padding: 0 1rem 1rem 1rem;
	}
	#about section#about-content{
		width: 90%;
		margin: 1rem 0 3rem;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	#about #card-1, #about #card-2, #about #card-3{
		flex-basis: 33%;
		flex-flow: column nowrap;
		margin: 0 2rem;
	}
	#about #card-1 .card-content, #about #card-2 .card-content, #about #card-3 .card-content{
		background: none;

	}
	#about .card-content h3{
		width: 80%;
		font-size: 3rem;
		line-height: 5rem;
		text-align: left;
		margin: 0;
		padding: 1rem 0 1rem;
	}
	#about #card-1 div.card-content ul{
		margin-top: 1rem;
	}
	#about #about-content ul li{
		font-size: 1.125rem;
		line-height: 1.625rem;
	}

}

/*  ========================================================
	========================================================
	Media: screen, width:; 1920 and wider
	----------------------------------------------------
	Ultra wide screens
	========================================================
	======================================================== */

@media only screen 
  and (min-width: 1920px) {
/* ------------------------------------------------------------------
	Layout: templates and foundation */ 
	header.page-width, #about .page-width, #nav, #page-title{
		width: 100vw;
	}
	footer.page-width, #about footer.page-width{
		width: 76vw;
	}
	#cards{
		width: 92vw;
		max-width: 110rem;
		flex-flow: row wrap;
		align-items: stretch;
		margin: 1rem auto;
	}
	.page-width{
		width: 80%;
	}
	#works-list{
		width: 70%;
	}
	#four-o-four #main-content-area{
		width: 40%;
	}

/* ------------------------------------------------------------------
	Homepage : main content layout */

	article.card{ 
		padding: 1rem;
		flex-basis: 25%;
	}
	a.card{
		padding: 2rem 2rem 3rem;
		justify-content: space-between;
	}
	.card-content{
		align-items: center;
	}
	.card-content h3{
		min-height: 6rem;
		align-items: center;
		font-size: 2.25rem;
		line-height: 2.5rem;
		letter-spacing: -0.1rem;
		vertical-align: middle;
		text-align: center;
		margin: 15rem 0 0 0;
		padding: 0.5rem 0 0.5rem;
	}
	#card-1 .card-content, #card-2 .card-content, #card-3 .card-content, #card-4 .card-content, #card-5 .card-content, #card-6 .card-content{ 
		background-position: center 0 ;
		background-size: 16rem 16rem;
	}	

/* ------------------------------------------------------------------ 
	Layout - main areas */

	header, #about header.page-width{
		height: 34.125rem; /* #nav: 50px high, #page-title: 12rem high and viewport dependant */
	}
	#home header, #home header img, #home header div#bg-img{
		border:0;
		border-color: rgb(255,255,255, 0);
	}
	header div#bg-img{
		width: 100vw;
		height: 34.125rem;
	}
	header #page-title{
		height: 30rem;
	}

/* ------------------------------------------------------------------
	Header : H1, Navigation, H2  */
	header #nav{
		padding: 1rem 10vw;
	}
	header #nav h1 a{
		float: right;
	}
	header img#graphic, header img#name{
		display: inline-block;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : homepage */
	#page-title, #page-title h1{
		flex-flow: row nowrap;
		justify-content: center;
	}
	#page-title #head1, #page-title #head2, #page-title #head3{
		font-size: 5rem;
		line-height: 10rem;
	}

/* ------------------------------------------------------------------
	Leaderboard fonts sizing : other pages */

/* -----------------------------------------------------
	Modifications : ABOUT page 
   	No background image as homepage, so the text-indent is reset here */

  #about #statement{
   	width: 50%;
		margin: 3rem auto;
		padding-top: 1rem;
		background: url(../graphics/quote-small.gif) 2rem 0.5rem no-repeat;
	}


	#about #statement p:first-child{
		margin-left: 4rem;
	}
	#about #statement p{
		flex-basis: 100%;
		font-size: 1.25rem;
		line-height: 1.75rem;
		padding: 0 1rem 1rem 1rem;
	}

	#about section#about-content{
		width: 80%;
		margin: 1rem 0 3rem;
	}
	#about #card-1, #about #card-2, #about #card-3{
		flex-basis: 33%;
	}
	#about .card-content h3{
		width: 80%;
		font-size: 3rem;
		line-height: 6rem;
		text-align: left;
		margin: 0;
		padding: 2rem 0;
	}

	#about #about-content ul li{
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
	#about .card-content p.chy-photo{
		padding: 0.5rem 1rem;
	}
	#about .card-content p.chy-photo img{
		width: 100%;
	}


}

/* ==|== print styles ==============================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
============================================================== 
*/

@media print {
  * { background: transparent !important; 
  	color: black !important; 
  	box-shadow:none !important; 
  	text-shadow: none !important; 
  	filter:none !important; 
  	-ms-filter: none !important; 
  	} /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 0px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}


/*  ========================================================
	========================================================
	2026 HOMEPAGE  —  added for the rebuilt index.html
	Everything below is new. It is scoped to #home (and the
	reusable .btn component) so works.html and about.html are
	untouched until they are rebuilt too.
	========================================================
	======================================================== */

/* --------------------------------------------------------
	TYPE — Figma text styles mapped to CSS

	Figma style            Figma spec                     CSS below
	---------------------  -----------------------------  ------------------
	(hero H1)              Museo Slab · 72 / 108%         #home h1
	(hero subhead)         Arvo · 21 / 150%               .hero-sub
	H2                     Arvo Bold · 40 / 125%          #home h2
	H3                     Arvo Bold · 24 / 32px          #home h3
	Body                   Arvo Regular · 16 / 24px       #home p
	Body bold              Arvo Bold · 16 / 24px          #home .label
	List                   Arvo Regular · 16 / 28px       #home .plain-list li
	Body.number-eyebrow    Arvo Bold · 20 / 24px          p.number-eyebrow (above)

	ONE TYPEFACE, ONE EXCEPTION. Everything on the site is rooney-web; only
	the hero H1 is museo-slab.

	1. ARVO IS A PLACEHOLDER FOR ROONEY. Rooney is not installed on the design
	   machine, so the Figma file stands other faces in for it — Arvo, and
	   previously Bitter and Inter. Wherever Figma shows a substitute, the CSS
	   says "rooney-web": the real face, already in the Typekit kit.

	2. THE KIT ONLY SHIPS TWO MUSEO SLAB WEIGHTS. Kit xds2ita serves museo-slab
	   at 700 and 800 — there is no 500 and no 900. The H1 below asks for 700,
	   which the kit does ship, so it renders exactly with no substitution.
	   (The Figma hero layer reads Museo Slab 500 — see the review notes.)

	Nothing outside the kit is needed any more: Bitter and Inter are gone,
	and with them the Google Fonts <link> that used to sit in each head.
	-------------------------------------------------------- */

/* Kept as a guard: the wordmark rule used to be "header h1{width:40%}", which
   caught this hero because the hero is a <header>. It is now scoped to
   .site-logo and no longer reaches here, but the explicit width keeps the
   flex row honest. */
#home .hero h1 {
	/* The clamp variables live HERE, not in #page-title. The legacy
	   "#head0 ... #head4" rule higher up reads the same three custom
	   properties, but those are declared inside #page-title, which only
	   exists on works/about/404 - on this page they resolved to nothing
	   and the clamp was silently dropped. Custom properties inherit, so
	   declaring them on the h1 makes that rule work as intended.

	   5.5cqi is derived, not guessed. "PRODUCT DESIGN + STRATEGY" measures
	   1176px at 72px, i.e. ~16.33x the font size, so the line occupies
	   16.33 x 5.5% = ~90% of the container at ANY width. That is the whole
	   reason for preferring cqi over vw here: the measure and the sizing
	   basis are the same box, so the 10% headroom is constant instead of
	   drifting with the hero's padding. 5.5cqi also lands on 72px - the
	   Figma size - at a 1440 viewport (5.5% of the 1312px container). */
	--min-font-size: 2rem;			/* 32px */
	--max-font-size: 4.5rem;		/* 72px - the Figma size */
	--ratio: 5.5cqi;

	display: flex;				/* words are flex items, so they reflow */
	flex-flow: row wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0 0.28em;				/* word spacing, scales with the type */
	width: 100%;
	float: none;
}
/* zero-height full-width item = a forced line break inside the wrap */
#home .hero-copy .hero-break {
	flex: 0 0 100%;
	height: 0;
}

#home h1 {
	font-family: "museo-slab", Arvo, helvetica, sans-serif;
	font-weight: 700;			/* shipped by the kit - see note 2 above */
	font-size: clamp(var(--min-font-size, 2rem), var(--ratio, 5.5cqi), var(--max-font-size, 4.5rem));
	line-height: 1.08;			/* Figma: 108% */
	letter-spacing: 0;
	color: #0C336E;
	text-align: center;
	text-transform: none;
}
#home .hero-sub {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 1.3125rem;			/* 21px */
	line-height: 1.5;
	color: #122E56;
	text-align: center;
	max-width: 51.25rem;			/* 820px, as in Figma */
	margin: 0 auto;
}
#home h2 {
	font-family: "rooney-web", georgia, serif;	/* Figma H2 = Arvo */
	font-weight: 700;
	font-size: 2.5rem;			/* 40px */
	line-height: 1.25;
	color: #0C336E;
	text-align: left;
}
/* Same family as every other H2 now - this only differs in size */
#home .section-head-alt {
	font-size: 2.375rem;			/* 38px */
}
#home h3 {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 1.5rem;			/* 24px */
	line-height: 2rem;			/* 32px */
	color: #0C336E;
}
#home h4 {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 1rem;			/* 16px */
	line-height: 1.5rem;			/* 24px */
	color: #0C336E;
	margin: 0;
}
#home p {
	font-family: "rooney-web", georgia, serif;
	font-weight: 400;
	font-size: 1rem;			/* 16px */
	line-height: 1.5rem;			/* 24px */
	color: #2D2B25;
}
#home .label {					/* Figma: Body bold */
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5rem;
	color: #0C336E;
	margin: 0;
}
#home .plain-list {				/* Figma: List — 16 / 28px */
	list-style: none;
	margin: 0;
	padding: 0;
}
/* p.number-eyebrow is declared up in BASE STYLES, but "#home p" above has the
   higher specificity, so the eyebrow has to be restated at this weight */
#home .number-eyebrow {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;			/* 20px */
	line-height: 1.5rem;			/* 24px */
	color: #72767E;
	text-transform: capitalize;
}
#home .plain-list li {
	font-family: "rooney-web", georgia, serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.75rem;			/* 28px */
	color: #2D2B25;
}

/* --------------------------------------------------------
	CTA BUTTONS — new component, no CSS existed for these

	Figma: 4px radius, 1px #122E56 border, 12px/20px padding,
	8px gap between icon and label, Bitter SemiBold 18.
	.btn-ghost  translucent white (used on the photo hero)
	.btn-solid  opaque white (used on the navy CTA band)
	.btn-sm     nav-bar size — 10px/20px padding, 6px radius, 16px label
	-------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;				/* 8px */
	padding: 0.75rem 1.25rem;		/* 12px 20px */
	border: 0.0625rem solid #122E56;
	border-radius: 0.25rem;			/* 4px */
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 1.125rem;			/* 18px */
	line-height: 1.2;
	color: #122E56;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:link, .btn:visited { color: #122E56; }
.btn-icon { width: 1.25rem; height: 1.25rem; display: block; }

.btn-ghost { background-color: rgba(255,255,255,0.6); }
.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active {
	background-color: #122E56;
	border-color: #122E56;
	color: #ffffff;
}
/* the icon is navy line art — invert it when the button fills in */
.btn-ghost:hover .btn-icon, .btn-ghost:focus .btn-icon,
.btn-solid:hover .btn-icon, .btn-solid:focus .btn-icon {
	filter: invert(100%) brightness(200%);
}

.btn-solid { background-color: #ffffff; }
.btn-solid:hover, .btn-solid:focus, .btn-solid:active {
	background-color: #0C336E;
	border-color: #ffffff;
	color: #ffffff;
}

.btn-sm {
	padding: 0.625rem 1.25rem;		/* 10px 20px */
	border-radius: 0.375rem;		/* 6px */
	font-size: 1rem;			/* 16px */
}

/* --------------------------------------------------------
	HERO
	Figma: 760px tall, cover-banner.jpg FILL, white scrim at 30%,
	nav bar on rgba(255,255,255,.42).
	The override on min-height/height is needed because the old
	stylesheet sets header{height:100vh} for the other pages.
	-------------------------------------------------------- */

#home .hero {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	height: auto;
	min-height: 47.5rem;			/* 760px */
	background: url(../img/cover-banner.jpg) center center no-repeat;
	background-size: cover;
}
#home .hero::before {				/* the white scrim */
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgba(255,255,255,0.30);
	pointer-events: none;
}
#home .hero-content { position: relative; z-index: 1; }

/* The hero's nav band. The markup inside is the shared #nav component -
   identical on all five pages - so only the band itself is scoped here:
   translucent white over the photo, and above .hero-content in the stack
   so the open mobile panel is not painted behind the headline. */
#home #nav {
	position: relative;
	z-index: 2;
	background-color: rgba(255,255,255,0.42);
}
/* "#home #nav" is two IDs, so it outranks the shared
   '#nav[data-open="true"]' rule further down; the open state has to be
   restated at this weight or the bar stays translucent over the photo. */
#home #nav[data-open="true"] { background-color: #ffffff; }
/* the nav has to outrank .hero-content, which comes later in the DOM at the
   same z-index - otherwise the open mobile panel paints behind the headline */

/* Each <li> is its own flex line so the anchor is centred as a box rather than
   dropped onto a text baseline. This is what keeps the booking link level with
   its siblings: an inline-flex box takes its baseline from its FIRST flex item,
   and for that link the first item is the <img>, whose baseline is its bottom
   edge — which sat 3px below the text baseline and shoved the whole link up.
   Centring the anchor inside the li sidesteps baseline derivation entirely. */
/* Identical to #main-nav a:hover on the other pages - white on navy, no
   underline. The two navs are the same component in two templates, so they
   should not behave differently. */
/* navy line art would disappear against the navy fill */
/* The booking link is an ordinary nav item that happens to carry an icon — NOT
   a .btn. Layout, type, colour and hover all come from the rule above; the only
   thing left to declare is the icon's size. */
#home .hero-content {
	/* query container for the H1 below, matching #page-title and
	   #page-title. NOTE it goes here and not on .hero-copy: .hero-copy is
	   shrink-to-fit (this element centres it), and inline-size containment on
	   a shrink-to-fit box resolves its width to zero. This element stretches
	   to the hero's full width, so it has a real width to measure. */
	container-type: inline-size;
	container-name: title-header;
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;				/* 40px */
	padding: 0 4rem 2.5rem;			/* EXEMPT from .page-width — see PAGE WIDTH note */
	text-align: center;
}
#home .hero-copy {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;				/* 16px */
	width: 100%;
}
#home .hero-ctas {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 1.5rem;				/* 24px */
	margin: 0;
}

/* --------------------------------------------------------
	SECTIONS — shared shell
	Figma paddings: clients + numbers 64/48, strength + CTA 96/64
	-------------------------------------------------------- */

#home .section {
	display: flex;
	flex-flow: column nowrap;
	gap: 2.5rem;				/* 40px */
	padding: 4rem 0;			/* horizontal inset now from .page-width */
	background-color: #ffffff;
}
#home .section-tint { background-color: #F8FBFB; }
#home .section-head { display: flex; flex-flow: column nowrap; gap: 0.875rem; }
#home .section-head h2 { margin: 0; }

/* At 768 and below the headline stops being two lines and stacks word by
   word. Above that it holds two lines. The forced break is redundant once
   every item is full width, so it is switched off here. */
@media only screen and (max-width: 48rem) {	/* 768px */
	#home .hero h1 { flex-flow: column nowrap; align-items: center; }
	#home .hero-copy .hero-break { display: none; }
}

/* --------------------------------------------------------
	PAGE WIDTH

	Every band on this page is full-bleed — the hero bar, the #F8FBFB
	tint behind "In Numbers", the navy CTA, the footer's top rule. So
	.page-width goes on a CHILD of each band, never on the band itself:
	the colour still spans the viewport while the content lines up with
	the rest of the site.

	ONE EXEMPTION: the hero copy. Its H1 is a display line composed for
	the full frame — "PRODUCT DESIGN + STRATEGY" needs 1176px at 72px,
	and the 80% cap gives 1152px at a 1440 viewport, so capping it broke
	the headline onto a third line. .hero-content therefore keeps its own
	4rem padding and is NOT wrapped. The hero NAV above it is still
	capped, so the chrome lines up with the sections; the copy below is
	centred, so the wider measure does not read as misaligned.

	The WIDTH is deliberately not declared here. It comes from the base
	stylesheet (100vw below 480, 80vw to 1279, 80% above). "#home
	.page-width" would outrank those media queries and freeze the page
	at a single size, so only the axis and the gap are set.
	-------------------------------------------------------- */

#home .page-width {
	flex-flow: column nowrap;
	gap: inherit;				/* picks up the band's own gap */
}
#home .site-footer > .page-width {
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
#home .section-cta > .page-width  { align-items: center; }

/* The base stylesheet only starts capping .page-width at 768px — the
   480–767 media query sets no width at all, so below 768 the base
   "width: 100vw" is what applies and there is no gutter. Since the bands
   no longer carry horizontal padding, the content would run edge to edge
   across that whole range, so the inset is restored here. Capped at 767 so
   the 80vw / 80% steps above it are left alone. */
@media only screen and (max-width: 47.9375rem) {	/* 767px */
	#home .page-width { width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* --------------------------------------------------------
	CLIENTS AND PRODUCTS
	Figma: 856 : 464 split, 24px gutter
	-------------------------------------------------------- */

#home .sector-columns {
	display: flex;
	flex-flow: row wrap;
	gap: 2rem;				/* 32px */
	align-items: flex-start;
}
#home .sector { display: flex; flex-flow: column nowrap; gap: 1rem; }
#home .sector h3 { margin: 0; }
#home .sector-served   { flex: 1 1 53.5rem; }	/* 856px */
#home .sector-delivered{ flex: 0 1 29rem; }	/* 464px - HUG, does not grow */
/* Figma column gap is 40, row gap 24 (the 768 frame shows both). */
#home .sector-groups {
	display: flex;
	flex-flow: row wrap;
	gap: 1.5rem 2.5rem;			/* 24px row / 40px column */
	align-items: flex-start;
}
/* the first group ("Institutional finance") is capped so it cannot grow with
   the flex line — the other two stay fluid */
#home .sector-groups > *:first-child {
	max-width: 15rem;			/* 240px */
}
/* Content-sized, so 3 across -> 2+1 -> 1 falls out of the measure rather
   than out of a breakpoint. Growing here would stretch short lists into
   dead space, which is exactly what the Figma widths avoid. */
#home .sector-group {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5rem;				/* 8px */
	flex: 0 1 auto;
}

/* --------------------------------------------------------
	IN NUMBERS
	Figma: five cards in a row, 32px gutter, icon 56px,
	20px between icon and label, 12px between label and metric
	-------------------------------------------------------- */

/* ----- metric band -------------------------------------------------
   Wraps on its own: 5 across -> 3+2 -> 2+3 -> 1, driven by each card's
   own min/max rather than by media queries. The min/max pairs below are
   the ones set on the cards in Figma, so a card never shrinks past the
   point its metric reads badly, and never stretches into dead space. */
#home .stat-band {
	display: flex;
	flex-flow: row wrap;
	gap: 3rem 2rem;				/* 48px row / 32px column - Figma */
	align-items: flex-start;
	/* flex-start, NOT space-between: once the band wraps, space-between
	   pushes the last row's cards to opposite edges and leaves a hole in
	   the middle. Flowing from the left keeps every row reading as a row. */
	justify-content: flex-start;
}
#home .stat {
	display: flex;
	flex-flow: column nowrap;
	flex: 1 1 11rem;
}
/* icon centred over the card, text stays flush left - per Figma */
#home .stat-icon {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.25rem;
}
/* per-card min/max, straight from the Figma constraints */
#home .stat-adoption   { min-width: 15rem;      max-width: 16.25rem; }	/* 240 / 260 */
#home .stat-scale      { min-width: 17.5rem;    max-width: 17.5rem;  }	/* 280 / 280 */
#home .stat-response   { min-width: 15rem;      max-width: 15rem;    }	/* 240 / 240 */
#home .stat-conversion { min-width: 10.625rem;  max-width: 13.75rem; }	/* 170 / 220 */
#home .stat-seo        { min-width: 8.25rem;    max-width: 9.375rem; }	/* 132 / 150 */
#home .stat .number-eyebrow { margin: 0 0 0.75rem; }
#home .stat-metric {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 1.5rem;			/* 24px — Figma H3 */
	line-height: 2rem;
	color: #0C336E;
	margin: 0;
}

/* --------------------------------------------------------
	WHERE I ADD THE MOST VALUE
	Figma: three cards, 24px gutter, white on #E7EAEE,
	8px radius, 28px padding, 18px internal gap
	-------------------------------------------------------- */

#home .strength-grid {
	display: flex;
	flex-flow: row wrap;
	gap: 1.5rem;				/* 24px */
	align-items: stretch;
}
#home .strength-card {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;			/* centres the icon; .strength-body is 100% */
	gap: 1.125rem;				/* 18px */
	flex: 1 1 16rem;			/* 256px - three fit the 1024 measure */
	padding: 1.75rem;			/* 28px */
	background-color: #ffffff;
	border: 0.0625rem solid #E7EAEE;
	border-radius: 0.5rem;			/* 8px */
}
#home .strength-icon { display: block; flex: none; width: 8rem; height: 8rem; }
/* the text block, so the icon can sit beside it when the card goes wide */
#home .strength-body {
	display: flex;
	flex-flow: column nowrap;
	gap: 1.125rem;				/* 18px */
	width: 100%;
}
#home .strength-card h3 { margin: 0; }
#home .strength-card h4 { margin: 0.5rem 0 0; }
#home .strength-card p {
	margin: 0;
	line-height: 1.5rem;			/* Figma "Body" style: 16 / 24px */
}

/* --------------------------------------------------------
	CLOSING CTA
	Figma: #122E56 band, centred, #C8D8EA body copy
	-------------------------------------------------------- */

#home .section-cta {
	background-color: #122E56;
	align-items: center;
	padding: 6rem 0;			/* horizontal inset now from .page-width */
	gap: 2rem;				/* 32px */
	text-align: center;
}
#home .cta-head {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
	max-width: 47.5rem;			/* 760px */
}
#home .section-cta h2 {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 2.5rem;			/* 40px */
	line-height: 1.25;
	color: #ffffff;
	text-align: center;
	margin: 0;
}
#home .section-cta p {
	font-family: "rooney-web", georgia, serif;
	font-weight: 400;
	font-size: 1.1875rem;			/* 19px */
	line-height: 1.7;
	color: #C8D8EA;
	margin: 0;
}
#home .cta-buttons {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 2rem;				/* 32px */
	margin: 0;
}

/* --------------------------------------------------------
	FOOTER
	Figma: 32/64 padding, 1px #E7EAEE top rule
	-------------------------------------------------------- */

#home .site-footer {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 2rem 0;			/* horizontal inset now from .page-width */
	background-color: #ffffff;
	border-top: 0.0625rem solid #E7EAEE;
}
#home .footer-cr {
	font-family: "rooney-web", georgia, serif;
	font-weight: 400;
	font-size: 0.9375rem;			/* 15px */
	line-height: 1.4;
	color: #666254;
	margin: 0;
}
#home .footer-nav { display: flex; gap: 1.5rem; margin: 0; }
#home .footer-nav a {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 0.8125rem;			/* 13px */
	line-height: 1.4;
	letter-spacing: 0.05em;
	color: #122E56;
	text-decoration: none;
}
#home .footer-nav a:hover, #home .footer-nav a:focus { text-decoration: underline; }

/* --------------------------------------------------------
	RESPONSIVE — the Figma file is desktop only, so these are
	my proposals rather than a translation of a drawn frame.
	-------------------------------------------------------- */

/* Figma's frame widths are CONTENT widths, not viewport widths, so each
   mockup maps to viewport = frame / 0.8:
       frame 1440 -> 1800    frame 1024 -> 1280    frame 480 -> 528
       frame 1280 -> 1600    frame  768 ->  960
   The cards hold three across down to a 1024px viewport and stack below
   it. (Figma's frames would put the switch at 1600; 1024 is the width
   that actually reads well in the browser.) */
@media only screen and (max-width: 63.9375rem) {	/* 1023px */
	#home .strength-card {
		flex: 1 1 100%;
		flex-flow: row nowrap;
		align-items: flex-start;
		gap: 2rem;			/* 32px */
	}
}

@media only screen and (max-width: 64rem) {	/* 1024px */
	#home .section { padding: 3.5rem 0; }
	#home .section-cta { padding: 4.5rem 0; }
	#home .sector-served, #home .sector-delivered { flex: 1 1 100%; }
}

@media only screen and (max-width: 48rem) {	/* 768px */
	#home .hero-sub { font-size: 1.125rem; }
	#home h2, #home .section-head-alt { font-size: 1.875rem; }
	#home .hero { min-height: 36rem; }
	#home .hero-content { padding: 0 1.5rem 2rem; }
	#home .section { padding: 3rem 0; }
	#home .section-cta { padding: 3.5rem 0; }
	#home .site-footer { padding: 1.5rem 0; }
	#home .strength-card { flex: 1 1 100%; }
	#home .hero-ctas, #home .cta-buttons { flex-flow: column nowrap; align-items: center; }
	#home .btn { width: 100%; max-width: 20rem; justify-content: center; }
}

/* The icon sits beside the text down to the 768 frame (viewport 960) and
   moves back above it by the 480 frame (viewport 528). 767 is the existing
   breakpoint inside that range. The metric cards drop their min/max here
   too - the 480 frame carries no constraints, so they fill the row rather
   than sitting at their design widths on a phone. */
@media only screen and (max-width: 47.9375rem) {	/* 767px */
	#home .strength-card { flex-flow: column nowrap; align-items: center; gap: 2rem; }
	/* Stacked, each card takes the row - so the Figma 480 frame's 32px
	   side padding applies here, pulling the text in off the gutter.
	   The icon is centred either way; this is what moves the eyebrow and
	   metric toward the middle of the column. */
	#home .stat {
		flex: 1 1 100%;
		min-width: 0;
		max-width: none;
		padding: 0 2rem;		/* 32px - Figma HomeRWD 480 */
	}
}


/*  ========================================================
	2026 BOOKING PAGE  —  added for the rebuilt booking.html
	Before this, the Google Calendar iframe on booking.html
	had no styling at all and the page still used the old
	leaderboard header. Scoped to #booking.
	======================================================== */

/* the old stylesheet gives header{height:100vh} and body{overflow:hidden};
   both have to be undone for a page that is mostly one tall embed */
#booking { overflow: visible; }



/* --------------------------------------------------------
	The scheduler itself — a bordered card so the embed reads
	as part of the page instead of a raw iframe on white
	-------------------------------------------------------- */

#booking #booking-content {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 2rem;
	padding: 3rem 4rem 4rem;
	background-color: #ffffff;
}
/* The standfirst moved out of the header; it leads the content instead.
   It is wrapped so the DIV is the flex item #booking-content centres, and
   it is given the scheduler's width so the two line up. The <p> inside is
   then just a <p> - no text-align or align-self needed to undo the
   centring, because nothing is centring it any more. */
#booking .booking-intro {
	width: 100%;
	max-width: 75rem;			/* 1200px - matches .scheduler */
}
#booking .booking-intro p {
	max-width: 44rem;			/* 704px - a comfortable measure */
	margin: 0;
	font-family: "rooney-web", georgia, serif;
	font-weight: 400;
	font-size: 1.1875rem;			/* 19px */
	line-height: 1.7;
	color: #2D2B25;
}
#booking .scheduler {
	width: 100%;
	max-width: 75rem;			/* 1200px */
	background-color: #ffffff;
	border: 0.0625rem solid #E7EAEE;
	border-radius: 0.5rem;
	overflow: hidden;
}
#booking .scheduler iframe {
	display: block;
	width: 100%;
	min-height: 75rem;			/* 1200px */
	border: 0;
}
#booking .booking-alt {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	font-family: "rooney-web", georgia, serif;
	font-size: 1rem;
	line-height: 1.5rem;
	color: #2D2B25;
}

/* the footer component is shared with the homepage */
#booking .site-footer {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 2rem 4rem;
	background-color: #ffffff;
	border-top: 0.0625rem solid #E7EAEE;
}
#booking .footer-cr {
	font-family: "rooney-web", georgia, serif;
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #666254;
	margin: 0;
}
#booking .footer-nav { display: flex; gap: 1.5rem; margin: 0; }
#booking .footer-nav a {
	font-family: "rooney-web", georgia, serif;
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1.4;
	letter-spacing: 0.05em;
	color: #122E56;
	text-decoration: none;
}
#booking .footer-nav a:hover, #booking .footer-nav a:focus { text-decoration: underline; }

@media only screen and (max-width: 48rem) {	/* 768px */
	#booking #booking-content { padding: 2rem 1.5rem 3rem; }
	#booking .site-footer { padding: 1.5rem; }
}

/* ========================================================
	========================================================
	2026 MOBILE NAV  —  below 700px, every page

	Two nav structures share these rules:
	  every page   #nav > .site-logo + .nav-toggle + nav#main-nav

	script/nav.js only flips data-open on the wrapper and writes the
	bar's measured height into --bar-h; everything visual is here.

	The open panel is position:fixed and covers the viewport below the
	bar, so the page behind it cannot be scrolled or tapped. --bar-h is
	measured rather than hard-coded because the bar is a different
	height on the homepage than on the legacy pages.
	========================================================
	======================================================== */

.nav-toggle {
	display: none;				/* no toggle above the breakpoint */
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;				/* 44px hit area */
	height: 2.75rem;
	padding: 0.375rem;			/* 6px, so the 32px icon centres */
	border: 0;
	background: none;
	border-radius: 0.25rem;
	cursor: pointer;
}
.nav-toggle img { display: block; width: 2rem; height: 2rem; }	/* 32px */
.nav-toggle:focus-visible { outline: 0.125rem solid #122E56; outline-offset: 0.125rem; }
/* which glyph shows is driven entirely by the open state */
.nav-toggle .nav-toggle-close { display: none; }
[data-open="true"] .nav-toggle .nav-toggle-open  { display: none; }
[data-open="true"] .nav-toggle .nav-toggle-close { display: block; }

/* the page behind the open panel must not scroll */
html.nav-open, html.nav-open body { overflow: hidden; }

@media only screen and (max-width: 43.6875rem) {	/* 699px */

	.nav-toggle { display: inline-flex; }

	/* ---- the panel, shared shape ---- */
	#nav #main-nav {
		position: fixed;
		top: var(--bar-h, 4.75rem);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;			/* under the bar, above the page */
		display: none;			/* closed */
		flex-flow: column nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 2rem;			/* 32px between items; each link carries 12px of
						   padding, so the visible gap reads ~56px */
		margin: 0;
		padding: 4rem 1.5rem;		/* 64px - Figma */
		background-color: #ffffff;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	#nav[data-open="true"] #main-nav { display: flex; }

	/* Every link in the panel is at least 48px tall, padded around the
	   text rather than sized by it - WCAG 2.5.8 asks for 24px minimum and
	   2.5.5 for 44px; 48 clears both and matches the platform guidance
	   for a comfortable thumb target. */
	#nav #main-nav a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 3rem;		/* 48px */
		padding: 0.75rem 1rem;		/* 12px / 16px */
		/* size is inherited: both navs are 1.125rem at every width now */
	}

	/* the bar goes fully opaque and stays above the panel */

	/* ---- legacy pages: the bar is #nav itself ---- */
	#nav {
		position: relative;
		z-index: 3;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
	}
	#nav[data-open="true"] { background-color: #ffffff; }
	#nav #main-nav { text-align: center; }
	#nav #main-nav ul {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		gap: 2rem;			/* 32px between items; each link carries 12px of
						   padding, so the visible gap reads ~56px */
		margin: 0;
		padding: 0;
		list-style: none;
		width: 100%;
	}
}

/* ========================================================
	========================================================
	2026 NAV GUTTERS  —  one profile, both templates

	The two headers were insetting their content differently: the
	homepage bar took its gutter from .page-width (10% either side),
	while #nav on the legacy pages steps 1rem -> 5vw -> 10vw, and below
	768 had no padding at all, so the logo sat flush against the edge.

	From 768 up the homepage adopts the legacy profile; below 768 the
	legacy pages adopt the homepage's. The numbers below mirror the
	"header #nav" rules already in the media queries above.
	========================================================
	======================================================== */

/* ---- below 768: the legacy bar takes the homepage's gutter ---- */
@media only screen and (max-width: 47.9375rem) {	/* 767px */
	header #nav { padding: 1rem 1.5rem; }		/* 16px / 24px */
}

/* ---- 768 and up: the homepage bar takes the legacy profile ---- */
@media only screen and (min-width: 48rem) {		/* 768px */
	/* the nav stops taking its inset from .page-width and pads itself,
	   so both templates place the logo at the same x */

}
@media only screen and (min-width: 64rem) {		/* 1024px */
}
@media only screen and (min-width: 120rem) {		/* 1920px */
}