@font-face {
    font-family: 'Anek Latin';
    font-style: normal;
    font-weight: 500;
    src: local('Anek Latin'), url('../font/AnekLatin[wdth,wght].woff') format('woff');
}

@font-face {
    font-family: 'Biko';
    font-style: normal;
    font-weight: 400;
    src: local('Biko'), url('../font/Biko_Regular.woff') format('woff');
}
@font-face {
    font-family: 'Biko';
    font-style: normal;
    font-weight: 300;
    src: local('Biko'), url('../font/Biko_Light-Restricted.woff') format('woff');
}
@font-face {
    font-family: 'Biko';
    font-style: normal;
    font-weight: 700;
    src: local('Biko'), url('../font/Biko_Bold.woff') format('woff');
}
@font-face {
    font-family: 'Biko';
    font-style: normal;
    font-weight: 900;
    src: local('Biko'), url('../font/Biko_Black.woff') format('woff');
}





html{
  background-color:#eaeaea;
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable){
  body{
    overflow-y: scroll;
  }
}

html,body{
  height:100%;
  margin:0;
  display:flex;
  justify-content:center;
  background:transparent;
  color:#231A0C;
  font-family: 'Anek Latin', sans-serif;
}

main{
  width:61.8vw;
  margin-top:6.18vh;
  text-align:left;
  position:relative;
  z-index:100;
}

/* Jumbotron */
.ofd-jumbotron {
  width:38.2vw;
  height:calc(38.2vw / 1.618);
  position:relative;
  overflow:hidden;
  background-color:#fff;
  border-radius:3px;
  box-shadow:inset 0 0 3vw rgba(0,0,0,.3), 0 .5vh 1vh rgba(0,0,0,.09);
  float:left;
}

.jumbotron__layer{
  position:absolute;
  inset:-2%;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0;
  transform:scale(1.02);
  transition:
    opacity 350ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .jumbotron__layer{ transition:none; }
}

/* Side logo */
.ofd-jumbotron-side{
  display:inline-block;
  width:23.6vw;
}

.ofd-jumbotron-side h1{
  text-align:center;
  font-size:2.9vw;
  padding-top:calc(((38.2vw / 1.618) / 2) - 2.1vw);
  margin:0;
  position:relative;
  z-index:101;
  font-family:'Biko', sans-serif;
}

.ofd-jumbotron-side h2{
  margin-top:-.2vw;
  text-align:center;
  font-size:.75vw;
  letter-spacing:.175vw;
  text-transform:uppercase;
  font-family:'Anek Latin',sans-serif;
  font-weight: 300;
}

/* Nav */
nav{
  display:block;
  width:19.1vw;
  text-align:left;
  margin-top:1.5vw;
  float:left;
}

nav ul{
  list-style:none;
  padding:0 0 0 1.5vw;
  margin:0;
}

nav li{ margin:0; padding:0; }

nav a{
  font-family:'Anek Latin',sans-serif;
  color:#000;
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.025rem;
  text-transform:uppercase;
  transition:transform 120ms ease;
  min-height:1.4rem;
  display:inline-block;
}

nav li.indented {
/*  padding-left: .35rem;*/
}

nav a:hover, a.sub-nav__link:hover{ transform:translateX(.0rem); font-weight:600 }

nav a.is-active{
  text-decoration:none;
  font-weight: 600;
  text-underline-offset:.2em;
}

nav a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.4;
}

nav .nav-category {
  font-family:'Anek Latin',sans-serif;
  color:#aaa;
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.28rem;
  text-transform:uppercase;
  transition:transform 120ms ease;
  min-height:1.4rem;
  display:inline-block;
/*  padding-bottom: .25rem;*/

}


/* Simple spacing helper (replaces bootstrap mt-2) */
.mt-2{ margin-top:.6rem; }
.mt-3{ margin-top:1rem; }
.mt-4{ margin-top:1.5rem; }

/* Dynamic content area */
#main-content{
  clear:both;
  padding-top:2.2rem;
  max-width:55ch;
  line-height:1.55;
  transition:opacity 240ms ease, transform 240ms ease;
  will-change:opacity,transform;
}

#main-content.is-leaving,
#main-content.is-entering{
  opacity:0;
  transform:translateY(8px);
}

#main-content h3{
  font-family:'Anek Latin',sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1rem;
  margin:0 0 .75rem 0;
}


/* Page transition target: entire <main> (content swap) */
main{
  transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
  will-change: opacity, transform, filter;
}
main.is-leaving,
main.is-entering{
  opacity:0;
  transform: translateY(5px);
  filter: blur(2px);
}


/* Layout fixes */
.ofd-jumbotron-side{
  float:left; /* keep next to jumbotron */
}
.clearfix{
  clear:both;
}







/* --- Subnav 2-column layout (scoped, no conflicts) --- */
.subnav-layout{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items:start;
  margin-left:1.5vw;
}

/* Fixed/sticky left nav (does not move while scrolling) */
.sub-nav{
  position: sticky;
  top: 1.25rem; /* adjust if you have a header */
  align-self:start;
  max-height: calc(100vh - 2.5rem);
  overflow:auto;
  padding-right: .5rem;
}

.sub-nav__list{
  list-style:none;
  margin:0;
  padding:0;
}

.sub-nav__link{
  display:block;
  padding:.35rem 0;
  text-decoration:none;
  color: inherit;
  font-family: 'Anek Latin', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  margin-bottom: .85rem;
}

.sub-nav__link.is-active{
/*  text-decoration: underline;*/
/*  text-underline-offset: .2em;*/
	font-weight: 600;
}

/* Right content */
.subnav-content{
  font-family: 'Anek Latin', sans-serif;
  min-width:0;
  font-weight: 100;
}

.subnav-content strong{
  text-transform: uppercase;

  font-weight: 600;
}

.subnav-content .item-description{
  margin: 2.5rem 0 2.5rem 0;
/*  text-transform: uppercase;*/
  letter-spacing: .085rem;
  font-size: .85rem;
  line-height: 1.25rem;
  font-weight: 100;
}

.subnav-section .item-description a, .subnav-section .item-description a:visited, details li a, details li a:visited{
	color: #227BC6;
	text-decoration: none;
}

.subnav-section .item-description a:hover, details li a:hover{
	color: #55ABF3;
}


.subnav-content h3{
  font-size: 1.85rem;
  font-weight: 100;
/*  margin-top: .35rem;*/
  margin-top: 0;
  text-transform: uppercase;
}

.subnav-content .img-grid {
  column-count: 2;
  column-gap: 1.65vw;     /* space between the two columns */
}

.subnav-content .img-grid  img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 1.65vw;     /* consistent vertical spacing */
  break-inside: avoid;  /* prevents awkward splits */

   border-radius:3px;
   box-shadow: 0 .5vh 1vh rgba(0,0,0,.1), 0 .1vh .2vh rgba(0,0,0,.1);

   cursor: pointer;
   transition: .25s ease;

}

.subnav-content .img-grid  img:hover {
   box-shadow: 0 .5vh 1.2vh rgba(0,0,0,.2), 0 .1vh .2vh rgba(0,0,0,.15);
   filter: brightness(1.05) contrast(105%);
}

.no-shadow {
  box-shadow:inset 0 0 3vw rgba(0,0,0,.3) !important;
}

.subnav-section{
  scroll-margin-top: 1.25rem; /* matches sticky top so headings aren’t hidden */
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 2.5rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 100;
/*  margin-top: .35rem;*/
  margin-top: 2.5rem;
  margin-bottom: 0;
  text-transform: uppercase;
}

hr {
	height: 1px;
	background-color: #efefef;
	border: none;
}

/* --- Simple image lightbox (opt-in via data-lightbox) --- */
.lb-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
  background: rgba(0,0,0,.72);
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
  z-index: 9999;
}

.lb-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.lb-dialog{
  position:relative;
  max-width:min(92vw, 1400px);
  max-height:92vh;
  transform: scale(.98) translateY(6px);
  opacity:0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.lb-overlay.is-open .lb-dialog{
  transform: scale(1) translateY(0);
  opacity:1;
}

.lb-img{
  display:block;
  max-width:100%;
  max-height:92vh;
  border-radius: 3px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  background:#fff;
}

.lb-close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:40px;
  height:40px;
  border:0;
  border-radius:2px;
  background:#fff;
  color:#111;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-size: 22px;
  line-height: 40px;
  text-align:center;
}

@media (prefers-reduced-motion: reduce){
  .lb-overlay, .lb-dialog{ transition:none; }
}


.contact-form input {
	min-width: 60%;
	display: inline-block;
	margin: .25rem 0 .5rem 0;
	border-radius: 2px;
	border: 1px solid #ccc;
	padding: 8px;
}

.contact-form textarea {
	min-width: 60%;
	display: inline-block;
	margin: .25rem 0 .5rem 0;
	border-radius: 2px;
	border: 1px solid #ccc;
	padding: 8px;
}

.contact-form label {
	display: block;
	width: 100%;
	text-transform: uppercase;
	font-size: .85rem;
}

.contact-form .form-group {
	margin: .5rem 0 .5rem 0;
}

.contact-form .submit-btn {
	margin: .5rem 0 .5rem 0;
	background-color: #F9F9F9;
	border: 1px solid #ccc;
	padding: 8px;
	border-radius: 3px;
	cursor: pointer;
	text-transform: uppercase;
}

.contact-form .submit-btn:hover {
	background-color: #efefef;
	border: 1px solid #aaa;
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.form-status {
  margin-top: 12px;
  font-size: 0.95rem;
}

.contact-response {
	width: 100%;
	text-align: center;
	font-size: 2rem;
}


.contact-link-home {
	width: 100%;
	text-align: center;
	font-size: 1.25rem;
	margin-top: 3rem;
}

.contact-link-home a {
	color: #222 !important;
	text-decoration: none  !important;
/*	border: 1px solid #ddd;*/
	padding: 1rem;
/*	border-radius: 3px;*/
	text-transform: uppercase;
}

.video-wrap {
/*  max-width: 960px;      /* optional */*/
/*  margin: 0 auto;        /* optional */*/
}
.video-wrap video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;      /* avoids white flash while loading */
  border-radius: 4px;   /* optional */
}

.video-credits { margin-top: .75rem; font-size: .95rem; }
.video-credits summary { cursor: pointer; font-weight: 600; }
.video-credits ul { margin: .5rem 0 0; padding-left: 1.2rem; }

details > summary {
    list-style-type: '→ ';
}

details[open] > summary {
    list-style-type: '↓ ';
}


details[open] > summary {
    margin-bottom: 0.5rem;
}








/* mobile.css

*/

/* Safer sizing on small screens */
*{ box-sizing:border-box; }
img, video{ max-width:100%; height:auto; }

/* Prevent accidental horizontal scroll from vw-based sizing */
/*html, body{ max-width:100%; overflow-x:hidden; }*/

/* ---------- Tablet & below ---------- */
@media (max-width: 1024px){

  html,body{
    display:block;         /* stop flex-centering that squeezes content */
    height:auto;
  }

  main{
    width:min(960px, 92vw);
    margin: 4vh auto 6vh;
    padding: 0 2vw;
  }

  /* Jumbotron + side logo: stack nicely */
  .ofd-jumbotron,
  .ofd-jumbotron-side{
    float:none;
    width:100%;
  }

  .ofd-jumbotron{
    height: calc(min(92vw, 960px) / 1.618);
    max-height: 42vh;
    margin-bottom: 1rem;
  }

  .ofd-jumbotron-side h1{
    font-size: clamp(28px, 8vw, 54px);
    padding-top: 2rem;
  }
  .ofd-jumbotron-side h2{
    font-size: clamp(11px, 2.4vw, 15px);
    letter-spacing: .14em;
    margin-top: .35rem;
    padding-bottom: 2rem;
  }

  /* Global nav blocks: full width */
  nav{
    float:none;
    width:100%;
    margin-top: 1.25rem;
  }

  nav ul{
    padding-left: 0;
  }

  nav a,
  nav .nav-category{
    font-size: 0.95rem;
    letter-spacing: .06em;
  }

  nav a{
    padding: .35rem 0;
    min-height: unset;
  }

  nav a:hover{ transform:none; } /* avoid layout jump on touch */

  /* Content */
  #main-content{
    max-width: 70ch;
    padding-top: 1.75rem;
    font-size: 1.02rem;
  }

  #main-content h3{
    font-size: 1.05rem;
    letter-spacing: .08em;
  }

  /* Subnav pages layout: collapse to one column */
  .subnav-layout{
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-left: 0;
  }

  /* Sticky top "tab bar" for subnav on tablets/phones */
  .sub-nav{
    position: static;
    top: 0;
    z-index: 1000;
    background: #fff;
    padding: .75rem 0 .5rem;
    border-bottom: 1px solid #ebebeb;
    max-height: none;

    width: 100%;
    max-width: 100%;
    overflow-x: hidden;     /* prevents sideways scrolling */

  }

  .sub-nav__list{
    -webkit-overflow-scrolling: touch;

    display: block;         /* instead of flex */
    overflow: visible;      /* instead of overflow-x:auto */
    padding: 0;
    margin: 0;
  }

  .sub-nav__list li{
    display: block;
    width: 100%;
  }

  .sub-nav__list::-webkit-scrollbar{ height: 8px; }
  .sub-nav__link{
    margin: 0;
    font-size: .9rem;
    letter-spacing: .06em;

    display: block;
    width: 100%;
    white-space: normal;    /* allow wrapping */
    padding: .45rem 0;      /* optional: nicer tap spacing */
  }

  .subnav-content{
    font-weight: 300;
  }

  .subnav-content h3{
    font-size: clamp(18px, 4.6vw, 28px);
  }

  .subnav-content .item-description{
    margin: 1.5rem 0 1.75rem;
    letter-spacing: .06em;
    font-size: .95rem;
    line-height: 1.5rem;
  }

  /* Image grid: keep 2 columns on tablets */
  .subnav-content .img-grid{
    column-count: 2;
    column-gap: 3.5vw;
  }
  .subnav-content .img-grid img{
    margin: 0 0 3.5vw;
  }

  /* Forms */
  .contact-form input,
  .contact-form textarea{
    min-width: 100%;
    width: 100%;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 600px){

  main{
    width: 92vw;
    margin: 3vh auto 5vh;
    padding: 0 1vw;
  }

  .ofd-jumbotron{
    height: calc(92vw / 1.618);
    max-height: 34vh;
    border-radius: 4px;
  }

  nav a,
  nav .nav-category{
    font-size: 0.95rem;
    letter-spacing: .05em;
  }

  /* Make section separators breathe less */
  .subnav-section{
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
  }

  /* Image grid: single column for phones */
  .subnav-content .img-grid{
    column-count: 1;
    column-gap: 0;
  }
  .subnav-content .img-grid img{
    margin: 0 0 4vw;
  }

  /* Lightbox: give more room for the image */
  .lb-overlay{ padding: 3vh 3vw; }
  .lb-close{
    top: -10px;
    right: -10px;
    width: 38px;
    height: 38px;
    line-height: 38px;
  }

  /* Big response text: scale down */
  .contact-response{ font-size: 1.5rem; }
  .contact-link-home{ font-size: 1.05rem; }
}

/* ---------- Large tablets in landscape ---------- */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape){
  .ofd-jumbotron{
    max-height: 52vh;
  }
}