/*========================================================
  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.6;
  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)
  );
}

/* ------------------------------------------------------------------
	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 */
	}

/* ------------------------------------------------------------------
	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;
	}
	/* the hero is 760px at every breakpoint (Figma); paired with
	   div#bg-img exactly as the rules above pair theirs */
	#home header, #home header div#bg-img{
		height: 47.5rem;
	}
	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 */
/* ------------------------------------------------------------------
	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;
	}
	/* the hero is 760px at every breakpoint (Figma); paired with
	   div#bg-img exactly as the rules above pair theirs */
	#home header, #home header div#bg-img{
		height: 47.5rem;
	}
	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 h1{
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

/* ------------------------------------------------------------------
	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;
	}
	/* the hero is 760px at every breakpoint (Figma); paired with
	   div#bg-img exactly as the rules above pair theirs */
	#home header, #home header div#bg-img{
		height: 47.5rem;
	}
	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 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;
	}
	/* the hero is 760px at every breakpoint (Figma); paired with
	   div#bg-img exactly as the rules above pair theirs */
	#home header, #home header div#bg-img{
		height: 47.5rem;
	}
	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 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 */ 

	/* From 1600 up all five metric cards fit on a single row, so the slack
	   that otherwise sits at the right edge is distributed between them
	   instead. Scoped to this breakpoint on purpose: below it the band
	   wraps, and space-between would push the last row's cards to opposite
	   edges and leave a hole in the middle.

	   Two IDs here (#home + #numbers) because the base
	   "#home .stat-band { justify-content: flex-start }" sits further down
	   the file and would otherwise win on source order. */
	#home section#numbers .stat-band {
		justify-content: space-between;
	}

	/* Same two-ID reason as above: the base rules for these two sit further
	   down the file, so one ID would lose on source order. */
	#home section#clients .sector-groups {
		gap: 1.5rem 4rem;			/* 24px row / 64px column */
	}
	/* box-sizing is border-box, so the padding comes OUT of the width. The
	   list needs 404px of content (its longest line is 390), so the box has
	   to be 404 + 48 = 452 for the padding to sit beside the text instead of
	   squeezing it onto two lines. */
	#home section#clients .sector-delivered {
		flex-basis: 28.25rem;			/* 452px = 404 content + 48 padding */
		min-width: 28.25rem;
		padding-right: 3rem;			/* 48px */
	}
	/* Back to the default H3 metrics at this width: the 1.75rem line-height
	   and the fixed 3rem height set further down the file are for the
	   narrower cards. Two IDs (#home + #strength) because that rule has the
	   same specificity and sits later - a media query adds none. */
	#home section#strength .strength-card h3 {
		line-height: 2rem;			/* the #home h3 default */
		height: auto;				/* no fixed height */
	}

	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;
	}
	/* the hero is 760px at every breakpoint (Figma); paired with
	   div#bg-img exactly as the rules above pair theirs */
	#home header, #home header div#bg-img{
		height: 47.5rem;
	}
	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;
	}

/* ------------------------------------------------------------------
	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;
	}
	/* the hero is 760px at every breakpoint (Figma); paired with
	   div#bg-img exactly as the rules above pair theirs */
	#home header, #home header div#bg-img{
		height: 47.5rem;
	}
	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;
	}

/* ------------------------------------------------------------------
	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. */
/* #page-title h1 already sets the family, weight, line-height and the clamp;
   it stacks its children in a column for the one-word titles. The hero
   headline is a phrase, so the words flow in a row and wrap, and the clamp
   needs a lower ratio: "PRODUCT DESIGN + STRATEGY" is ~16.33x the font size,
   so at 5.5cqi it occupies ~90% of the container at any width. */
#home #page-title h1 {
	--min-font-size: 2rem;			/* 32px */
	--max-font-size: 4.5rem;		/* 72px - the Figma size */
	--ratio: 5.5cqi;

	flex-flow: row wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0 0.28em;				/* word spacing, scales with the type */
	width: 100%;
}
/* zero-height full-width item = a forced line break inside the wrap */
#home #page-title .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 */
}

/* 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 the title block 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; }
/* header #page-title is a centred ROW, sized for a one-word title. The hero
   stacks a headline, a standfirst and two buttons, so it runs as a column and
   takes the Figma height. Everything else - the photo, #bg-img, the container
   query - comes from the base styles. */
#home #page-title {
	flex-flow: column nowrap;
	gap: 2.5rem;				/* 40px */
	padding: 0 4rem 2.5rem;
	text-align: center;
}
#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-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 #page-title h1 { flex-flow: column nowrap; align-items: center; }
	#home #page-title .hero-break { display: none; }
}


/* --------------------------------------------------------
	SECTIONS

	Same pattern as #works-list on works.html: the <section> carries
	class="page-width" (which supplies display:flex, width and the
	centring) and its id adds the axis, the cap and the padding. No
	wrapper div, so nothing nests one .page-width inside another.
	-------------------------------------------------------- */

#clients, #numbers, #strength, #contact {
	flex-flow: column nowrap;
	gap: 2.5rem;				/* 40px */
	max-width: 89.5rem;			/* 1432px - matches #works-list */
	padding: 4rem 0;
	margin: 0 auto;
}
#numbers { background-color: #F8FBFB; }

/* FULL-BLEED BANDS, NO WRAPPER
   #numbers and #contact are .page-width sections, so they are capped like
   every other one - but their colour should run edge to edge. The spread
   shadow paints the same colour far past the box on both sides; clip-path
   trims it back to the section's exact height so nothing leaks above or
   below.

   Why this and not the alternatives:
     - box-shadow never participates in layout, so it cannot create a
       scrollbar. A 100vw pseudo-element would overshoot by the scrollbar's
       width - the same overshoot the nested .page-width was causing.
     - no extra element, so the DOM stays consistent with the other pages.
   Note the band is paint only: a click in the bleed lands on <body>, not on
   the section. Neither band carries interaction, so that is fine. */
#home section#numbers {
	box-shadow: 0 0 0 100vmax #F8FBFB;
	clip-path: inset(0 -100vmax);
}
#contact {
	align-items: center;
	gap: 2rem;				/* 32px */
	padding: 6rem 1rem;
	background-color: #122E56;
	text-align: center;
}
/* same full-bleed treatment as #numbers above */
#home section#contact {
	box-shadow: 0 0 0 100vmax #122E56;
	clip-path: inset(0 -100vmax);
}
#home footer.page-width {
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 89.5rem;
	margin: 0 auto;
}

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

#home .sector-columns {
	display: flex;
	flex-flow: row wrap;
	gap: 3rem;				/* 64px - Figma */
	align-items: flex-start;
}
#home .sector { display: flex; flex-flow: column nowrap; gap: 1rem; }
#home .sector h3 { margin: 0; }
/* The bases used to be the Figma widths (856 / 464), but those are wider
   than the columns actually need - measured max-content is 831 and 373 - so
   the pair wrapped ~200px earlier than it had to.

   Served now takes a small basis and grows: it fills whatever is left, and
   its three groups wrap 3 -> 2+1 inside rather than forcing the whole pair
   onto separate rows. Delivered is fixed at the width of its longest line so
   its list never reflows. Together they stay side by side until the 1024
   breakpoint stacks them deliberately. */
#home .sector-served   { flex: 1 1 35rem; }	/* 560px - its two groups side by side */
#home .sector-delivered{ flex: 0 0 25.25rem; }			/* 404px - Figma */
/* Figma column gap is 40, row gap 24 (the 768 frame shows both). */
#home .sector-groups {
	display: flex;
	flex-flow: row nowrap;			/* the pair holds; see the 767 query */
	gap: 1.5rem 2.5rem;			/* 24px row / 40px column */
	align-items: flex-start;
}
/* Figma: the first group is 226px wide including 24px of right padding,
   which holds it off the second column; the second group is fluid. */
#home .sector-groups > *:first-child {
	max-width: 14.125rem;			/* 226px */
	padding-right: 1.5rem;			/* 24px */
}
/* 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 flush left, aligned with the eyebrow and metric beneath it */
#home .stat-icon {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 0 1.25rem;
}
/* per-card min/max, straight from the Figma constraints */
#home .stat-adoption   { min-width: 14rem;      max-width: 16rem;    }	/* 240 / 320 */
#home .stat-scale      { min-width: 10rem;    	max-width: 12.5rem;  }	/* 280 / 280 */
#home .stat-response   { min-width: 13rem;      max-width: 14.5rem;    }	/* 240 / 240 */
#home .stat-conversion { min-width: 10.5rem;  max-width: 12.5rem; }	/* 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; line-height:1.75rem; height: 3rem;}
#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 .cta-head {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
	max-width: 47.5rem;			/* 760px */
}
#contact 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;
}
#contact 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 */
	#clients, #numbers, #strength { padding: 3.5rem 1rem; }
	#contact { padding: 4.5rem 1rem; }
	#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; }
	/* Page titles need a gutter on phones. "WORKS" and "ABOUT" are short
	   enough never to reach the edge, but "Page Not Found :(" does - it used
	   to be shrunk to fit by FitText, which is gone. */
	#page-title { padding-left: 1.5rem; padding-right: 1.5rem; }
	#home #page-title { padding: 0 1.5rem 2rem; }
	#clients, #numbers, #strength { padding: 3rem 1.5rem; }
	/* only here do the two sector groups stack; above this they stay side by
	   side and it is .sector-delivered that wraps below instead */
	#home .sector-groups { flex-flow: row wrap; }
	/* 
	section#clients, section#numbers, section#strength, section#contact {
		padding: 0 2rem;
	}
	*/

	#contact { padding: 3.5rem 1.5rem; }
	#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 */
	}
}

/* Below 600 the cards stop being sized individually - they fill the row, and
   the inset moves from each card onto the band, so the column of metrics
   reads as one block nudged toward the centre rather than five padded cards. */
@media only screen and (max-width: 37.4375rem) {	/* 599px */
	#home .stat-band { padding: 0 3rem; }		/* 32px */
	#home .stat {
		max-width: none;
		padding: 0;				/* the band owns it now */
	}
}


/*  ========================================================
	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;
	}
	/* While the panel is open - and only then - the bar is pinned to the
	   viewport. Closed, it stays in normal flow and scrolls away as usual.

	   The panel is position:fixed, so it is placed against the viewport.
	   If the bar is left in flow it scrolls independently of the panel,
	   and any scroll offset opens a strip of bare hero image between the
	   two while carrying the logo and close button off-screen. Scrolling
	   the page to the top on open was tried instead (2026-09-25) and does
	   not hold on iOS: overflow:hidden lands on <html> in the same tick
	   and the pending scroll never commits. Pinning both to the viewport
	   is the only arrangement they cannot drift apart in.

	   Restated at two IDs because "#home #nav" sets position:relative at
	   (2,0,0), which outranks the (1,1,0) of the shared selector. */
	#nav[data-open="true"],
	#home #nav[data-open="true"] {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		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 */
}