/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* CSS VARIABLES
/*******************************************/

:root {
     /* Colours */
     --color-bg:          #f7f4f4;
     --color-surface:     #f2ede9;
     --color-muted:       #d7b6af;
     --color-text:        #441e0c;
     --color-accent-soft: #b1aeff;
     --color-accent-bold: #eb0a55;
     --color-white:       #ffffff;

     /* Typography */
     --font-display: "IBM Plex Mono", monospace;
     --font-body:    "Lato", sans-serif;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
     background-color: #f9f6f6;
     color: var(--color-text);
     font-family: var(--font-body);
}

a {
     color: var(--color-text);
     text-decoration: none;
}

p {
     line-height: 1.5;
}

h1 {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: clamp(64px, 14vw, 175px);
     padding: 0;
     margin: clamp(40px, 8vw, 100px) 10px clamp(16px, 3vw, 40px) 40px;
}

h2 {
     font-family: var(--font-display);
     font-weight: 500;
     font-size: clamp(32px, 6vw, 56px);
     padding: 0;
     margin: clamp(40px, 8vw, 100px) 10px clamp(16px, 3vw, 40px) 40px;
     text-align: center;
}

h4 {
     font-family: var(--font-display);
     font-weight: 300;
     font-size: clamp(16px, 2.5vw, 35px);
     margin: 0 0 0 48px;
}

/******************************************
/* INDEX
/*******************************************/

.pitch-section {
     padding: 0 10%;
}

.pitch-section h2 {
     text-align: left;
     margin-top: clamp(16px, 3vw, 40px);
     margin-left: 0;
     margin-right: 0;
}

.pitch-section h1,
.pitch-section h3,
.pitch-section h4,
.pitch-section p {
     margin-left: 0;
     margin-right: 0;
}

.pitch-section .contact-form {
     margin-left: 0;
     margin-right: 0;
}

.italic {
     font-style: italic;
}

@media (min-width: 768px) {
     .pitch-section {
          padding: 0 20%;
     }
}

@media (min-width: 1024px) {
     .pitch-section {
          padding: 0 25%;
     }
}

/******************************************
/* HERO
/*******************************************/

.hero-heading {
     display: flex;
     align-items: center;
     justify-content: center;
}

.tagbox-stack {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     width: min(80vw, 400px);
     margin-top: clamp(40px, 8vw, 100px);
     margin-bottom: clamp(16px, 3vw, 40px);
}

.tagbox {
     position: relative;
     padding: clamp(10px, 1.2vw, 18px) clamp(14px, 1.8vw, 26px);
}

.tagbox h3 {
     font-family: var(--font-display);
     font-size: clamp(14px, 3.5vw, 22px);
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     text-align: center;
}

@keyframes scrapbook-drop-1 {
     0%   { opacity: 0; transform: rotate(14deg) translate(-80px, -50px); }
     65%  { opacity: 1; transform: rotate(1deg) translate(4px, 4px); }
     100% { opacity: 1; transform: rotate(3deg) translate(0, 0); }
}

@keyframes scrapbook-drop-2 {
     0%   { opacity: 0; transform: rotate(-14deg) translate(100px, 10px); }
     65%  { opacity: 1; transform: rotate(-1deg) translate(-4px, 2px); }
     100% { opacity: 1; transform: rotate(-3deg) translate(0, 0); }
}

.tagbox-1 {
     background-color: var(--color-accent-soft);
     transform: rotate(3deg);
     z-index: 1;
     animation: scrapbook-drop-1 0.69s cubic-bezier(0.34, 1.4, 0.64, 1) 0.15s both;
}

.tagbox-1 h3 {
     color: var(--color-white);
}

.tagbox-2 {
     background-color: #f2ede9;
     border: 2px solid #41280c;
     transform: rotate(-3deg);
     margin-top: -8px;
     z-index: 2;
     animation: scrapbook-drop-2 0.69s cubic-bezier(0.34, 1.4, 0.64, 1) 0.45s both;
}

.tagbox-2 h3 {
     color: var(--color-text);
}

/******************************************
/* LAYOUT
/*******************************************/

header {
     border-bottom: 2px solid var(--color-text);
     position: relative;
}

footer {

}

/******************************************
/* DESKTOP NAV (1024px+)
/*******************************************/

.mobile-header {
     display: none;
}

.mobile-nav {
     display: none;
}

.primary-nav {
     display: block;
}

.primary-nav ul {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 12.5vw)) 1fr minmax(0, 12.5vw);
     margin: 0;
     padding: 0;
     width: 100%;
}

.primary-nav li {
     display: block;
     text-transform: uppercase;
     font-family: var(--font-display);
     font-size: clamp(11px, 1.2vw, 14px);
     font-weight: 400;
     letter-spacing: 0.08em;
     border-right: 2px solid var(--color-text);
}

.primary-nav li:first-child {
     border-left: 2px solid var(--color-text);
}

.nav-spacer {
     border: none;
}

.nav-logo a {
     display: flex;
     align-items: center;
     padding: 3px 20px;
}

.nav-logo img {
     height: 28px;
     width: auto;
     display: block;
}

.primary-nav li a {
     display: flex;
     align-items: center;
     padding: 10px 20px;
     height: 100%;
}

.primary-nav li:not(.nav-spacer):hover {
     background-color: var(--color-accent-bold);
}

.primary-nav li:not(.nav-spacer):hover a {
     color: var(--color-white);
}

/******************************************
/* TABLET NAV (768px–1024px)
/*******************************************/

@media (max-width: 1024px) {

     .primary-nav ul {
          grid-template-columns: repeat(3, minmax(0, 18vw)) 1fr minmax(0, 18vw);
     }

     .primary-nav li {
          font-size: 10px;
          letter-spacing: 0.04em;
     }

     .primary-nav li a {
          padding: 8px 14px;
     }

     .nav-logo a {
          padding: 3px 14px;
     }

     .nav-logo img {
          height: 20px;
     }

}

/******************************************
/* MOBILE NAV (below 768px)
/*******************************************/

@media (max-width: 768px) {

     /* Hide desktop nav */
     .primary-nav {
          display: none;
     }

     /* Show mobile header bar */
     .mobile-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
     }

     .mobile-logo {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 20px;
          color: var(--color-text);
          text-decoration: none;
     }

     /* Hamburger button */
     .hamburger {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 24px;
          height: 16px;
          background: none;
          border: none;
          cursor: pointer;
          padding: 0;
     }

     .hamburger span {
          display: block;
          width: 100%;
          height: 2px;
          background-color: var(--color-text);
          transition: all 0.25s ease;
          transform-origin: center;
     }

     /* Hamburger → ✕ when open */
     .hamburger.is-open span:nth-child(1) {
          transform: translateY(7px) rotate(45deg);
     }

     .hamburger.is-open span:nth-child(2) {
          opacity: 0;
     }

     .hamburger.is-open span:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg);
     }

     /* Mobile nav overlay */
     .mobile-nav {
          display: block;
          position: absolute;
          top: 100%;
          right: 0;
          width: 50%;
          background-color: var(--color-bg);
          border-left: 2px solid var(--color-text);
          border-bottom: 2px solid var(--color-text);
          z-index: 100;

          /* Hidden by default */
          opacity: 0;
          pointer-events: none;
          transform: translateY(-8px);
          transition: opacity 0.25s ease, transform 0.25s ease;
     }

     .mobile-nav.is-open {
          opacity: 1;
          pointer-events: all;
          transform: translateY(0);
     }

     .mobile-nav ul {
          margin: 0;
          padding: 0;
     }

     .mobile-nav li {
          display: block;
          border-bottom: 2px solid var(--color-text);
          font-family: var(--font-display);
          font-size: 13px;
          font-weight: 400;
          text-transform: uppercase;
          letter-spacing: 0.08em;
     }

     .mobile-nav li:last-child {
          border-bottom: none;
     }

     .mobile-nav li a {
          display: block;
          padding: 18px 20px;
          color: var(--color-text);
     }

     .mobile-nav li:hover {
          background-color: var(--color-accent-bold);
     }

     .mobile-nav li:hover a {
          color: var(--color-white);
     }

}

/******************************************
/* SERVICES
/*******************************************/

.services-grid-section {
     display: flex;
     justify-content: center;
     margin: clamp(32px, 6vw, 80px) 0 clamp(40px, 8vw, 100px);
}

.services-grid {
     display: flex;
     gap: 0;
     width: 50%;
}

.service-card + .service-card {
     margin-left: -2px;
}

.service-card {
     flex: 1;
     min-height: clamp(200px, 24vw, 320px);
     display: grid;
     perspective: 800px;
     cursor: pointer;
}

.card-inner {
     position: relative;
     transform-style: preserve-3d;
     transition: transform 0.5s ease;
}

.card-inner.is-flipped {
     transform: rotateY(180deg);
}

.card-front,
.card-back {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 16px;
     padding: clamp(20px, 3vw, 40px);
     overflow: hidden;
     border: 2px solid var(--color-text);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
}

.card-front img {
     width: 70%;
     height: auto;
     display: block;
}

.card-back {
     transform: rotateY(180deg);
     background-color: #f2ede9;
}

.service-card h3 {
     font-family: var(--font-display);
     font-size: clamp(13px, 1.4vw, 18px);
     font-weight: 500;
     text-transform: uppercase;
     text-align: center;
     letter-spacing: 0.08em;
}

.service-card p {
     font-family: var(--font-body);
     font-size: 15px;
     line-height: 1.6;
     text-align: center;
}

@media (max-width: 1024px) and (min-width: 769px) {

     .services-grid {
          width: 65%;
     }

}

@media (max-width: 768px) {

     .services-grid {
          flex-direction: column;
          width: 65%;
     }

     .service-card + .service-card {
          margin-left: 0;
          margin-top: -2px;
     }


     .service-card {
          min-height: clamp(175px, 40vw, 290px);
     }

}

/******************************************
/* CONTACT FORM
/*******************************************/

.contact-form {
     margin: clamp(32px, 6vw, 80px) 40px clamp(40px, 8vw, 100px) 40px;
     max-width: 640px;
}

.form-group {
     display: flex;
     flex-direction: column;
     margin-bottom: clamp(24px, 4vw, 40px);
}

.form-group label {
     font-family: var(--font-display);
     font-size: 11px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--color-text);
     margin-bottom: 10px;
}

.form-group input,
.form-group textarea {
     background: transparent;
     border: none;
     border-bottom: 2px solid var(--color-text);
     color: var(--color-text);
     font-family: var(--font-body);
     font-size: 16px;
     padding: 10px 0;
     width: 100%;
     outline: none;
     transition: border-color 0.2s ease;
}

.form-group textarea {
     resize: vertical;
     line-height: 1.6;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
     color: var(--color-muted);
}

.form-group input:focus,
.form-group textarea:focus {
     border-bottom-color: var(--color-accent-bold);
}

.btn-submit {
     background-color: var(--color-accent-bold);
     margin-top: 8px;
}

.btn-submit:hover {
     background-color: var(--color-accent-bold);
}

/******************************************
/* BUTTONS
/*******************************************/

.btn {
     display: inline-block;
     background-color: var(--color-accent-soft);
     color: var(--color-white);
     font-family: var(--font-display);
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     padding: 14px 28px;
     border: 2px solid var(--color-accent-soft);
     cursor: pointer;
     text-decoration: none;
}

.btn-group {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     width: max-content;
     margin: clamp(16px, 3vw, 32px) auto clamp(40px, 8vw, 80px);
}

.btn-group .btn,
.btn-group .secondary-btn {
     flex: 1 1 0;
     text-align: center;
     white-space: nowrap;
}

.secondary-btn {
     display: inline-block;
     background-color: var(--color-bg);
     color: var(--color-text);
     font-family: var(--font-display);
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     padding: 14px 28px;
     border: 2px solid var(--color-text);
     cursor: pointer;
     text-decoration: none;
}

/******************************************
/* FOOTER
/*******************************************/

footer {
     background-color: var(--color-text);
     padding: clamp(10px, 2vw, 24px) clamp(24px, 5vw, 60px);
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.btn-footer {
     background: transparent;
     border: 2px solid var(--color-white);
     color: var(--color-white);
}

.btn-footer:hover {
     background: var(--color-white);
     color: var(--color-text);
}

.footer-instagram {
     color: var(--color-white);
     display: flex;
     align-items: center;
}

.footer-instagram:hover {
     color: var(--color-accent-bold);
}