@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');
/*@font-face {
    font-family: 'Hatton';
    src: url('/fonts/PPHattonUltralightItalic.eot') format('embedded-opentype'),
         url('/fonts/PPHattonUltralightItalic.woff2') format('woff2'),
         url('/fonts/PPHattonUltralightItalic.woff') format('woff'),
         url('/fonts/PPHattonUltralightItalic.ttf') format('truetype'),
         url('/fonts/PPHattonUltralightItalic.svg#PPHattonUltralightItalic') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}*/
@font-face {
    font-family: 'Hatton';
    src: url('/fonts/PPHattonUltralightItalic.woff2') format('woff2'),
         url('/fonts/PPHattonUltralightItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
.amp-alt{
	-moz-font-feature-settings: "ss01";
	-webkit-font-feature-settings: "ss01";
	font-feature-settings: "ss01";
}
:root{
  --dark-green: #162623;
  --light-green: #45514F;
  --light: #EADCCC;
  --main: #CF8148;
  --font: 'Host Grotesk', sans-serif;
  --font-accent: 'Hatton', serif;
  --animate: all 0.35s ease-in-out;
  --shadow: 0 0 1.6rem hsla(0 0% 0% / 0.16);
  --grid-gap: 1.6rem;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
html{
  font-size: 62.5%;
}
body{
  color: var(--light);
  background: radial-gradient(circle at 50% 80%, var(--light-green), var(--dark-green));
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 300;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}
body::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: url(../images/graphic-noise.png);
    opacity: .8;
    pointer-events: none;
}
body > *{
    position: relative;
    z-index: 2;
}

/* =============================================================
   CUSTOM CURSOR
   ============================================================= */

/* Hide native cursor on non-touch devices */
@media (pointer: fine) {
    *, *::before, *::after {
        cursor: none !important;
    }
}

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    /* GSAP drives position — transform is set via JS */
}

/* Small filled cream dot */
.cursor-dot {
    width:  .7rem;
    height: .7rem;
    background: var(--light);
    /* offset so the dot is centred on the pointer */
    margin-left: -.35rem;
    margin-top:  -.35rem;
}

/* Terracotta ring — lagging behind the dot */
.cursor-ring {
    width:  3.6rem;
    height: 3.6rem;
    border: 1.5px solid var(--main);
    background: transparent;
    margin-left: -1.8rem;
    margin-top:  -1.8rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Hover state — ring morphs on interactive elements */
body.cursor-hover .cursor-ring {
    background: hsla(27, 52%, 55%, 0.15);
    border-color: var(--main);
    /* scale is handled by GSAP */
}

/* Click flash */
body.cursor-click .cursor-dot {
    background: var(--main);
}

/* =============================================================
   PAGE LOADER
   ============================================================= */

/* Prevent flash of content before loader fires */
html.loader-active body > *:not(.loader):not(.cursor-dot):not(.cursor-ring) {
    visibility: hidden;
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
}

/* Top and bottom split panels */
.loader__panel {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--dark-green);
    will-change: transform;
}
.loader__panel--top  { top: 0; }
.loader__panel--bottom { bottom: 0; }

/* Noise texture on panels */
.loader__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(assets/images/graphic-noise.png);
    opacity: .7;
    pointer-events: none;
}

/* Centred content — counter + progress */
.loader__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.2rem;
    z-index: 1;
}

/* Counter — big Hatton italic number */
.loader__counter {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: clamp(10rem, 16vw, 22rem);
    line-height: 1;
    color: var(--light);
    letter-spacing: -0.04em;
    font-weight: 400;
    display: block;
    min-width: 3ch;
    text-align: center;
    will-change: contents;
}

/* Progress bar — thin line below counter */
.loader__progress {
    width: clamp(12rem, 20vw, 28rem);
    height: 1px;
    background: hsla(32 42% 86% / .15);
    overflow: hidden;
}
.loader__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--main);
    transform-origin: left;
    will-change: width;
}

/* Hidden state — after animation completes */
.loader.is-done {
    display: none;
}

a.btn{
    border: 1px solid var(--light);
    height: 4rem;
    border-radius: 4rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .01em;
    padding: 2px 4rem 0;
    margin: 0;
    color: var(--light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--animate);
    overflow: hidden;
    position: relative;
}
a.btn:hover{
    color: var(--dark-green);
}
a.btn::before{
    content: '';
    position: absolute;
    left: -104%;
    top: -1%;
    height: 102%;
    width: 102%;
    z-index: -1;
    border-radius: 4rem;
    background: var(--light);
    transition: var(--animate);
}
a.btn:hover::before{
    left: -2%;
}
a.btn.disabled{
    opacity: .48;
}
a.btn.btn.disabled:hover{
    color: var(--light);
}
a.btn.btn.disabled:hover::before{
    left: -104%;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4{
    font-weight: 300;
    text-transform: uppercase;
    margin: 0 0 1.6rem;
}
h5, .h5,
h6, .h6{
    font-weight: 300;
    letter-spacing: .1em;
    color: var(--main);
    text-transform: uppercase;
    margin: 0 0 1.6rem;
}
h1, .h1{
    font-size: clamp(4rem, 5vw, 7.2rem);
    line-height: 1.075;
}
h2, .h2{
    font-size: clamp(3.2rem, 4.5vw, 6.4rem);
    line-height: 1.075;
}
h3, .h3{
    font-size: clamp(1.8rem, 1.4vw, 2rem);
    line-height: 1.075;
}
h4, .h4{
    font-size: clamp(2.4rem, 2.8vw, 4rem);
    line-height: 1.075;
}
h1 strong, .h1 strong,
h2 strong, .h2 strong,
h3 strong, .h3 strong,
h4 strong, .h4 strong{
    text-transform: capitalize;
    font-weight: 400;
    color: var(--main);
    font-family: var(--font-accent);
    font-style: italic;
}
h1 strong, .h1 strong{
    font-size: clamp(9.2rem, 12.5vw, 18rem);
}
h2 strong, .h2 strong{
    font-size: clamp(4rem, 3.1vw, 5.6rem);
}
h3 strong, .h3 strong{
    font-size: clamp(4rem, 2.8vw, 5.2rem);
}
.contact__noise {
    position: absolute;
    inset: 0;
    background: url(../images/graphic-noise.png);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}
@media screen and (max-width: 1024px){
    .cursor-ring,
    .cursor-dot,
    .scroll{
        display: none;
    }
}
main{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 1.6rem;
}
header{
    padding: 2.4rem;
    position: fixed;
    z-index: 999;
    width: 100%;
    transition: var(--animate);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header img{
    width: 4.8rem;
}
header ul{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.6rem;
}