/* Final display-type spacing refinements */
.hero h1 {
  font-size: clamp(78px, 11.6vw, 220px);
  line-height: .85;
}
.hero h1 span { white-space: nowrap; }
.hero h1 span:nth-child(2) { padding-left: 0; font-size: 1em; letter-spacing: -.1em; }
.hero-bottom p { max-width: 530px; text-wrap: pretty; }
@media (max-width: 700px) { .hero-bottom p { max-width: 230px; } }

/* Keep the Contact arrow from shifting its navigation item off the baseline. */
.site-nav { align-items: center; }
.site-nav a { display: inline-flex; align-items: center; height: 18px; line-height: 1; }
.wordmark { line-height: .9; letter-spacing: -1px; }

.work-section .work-link { color: #7C1030 !important; border-color: #7C1030 !important; }

/* A little movement for discovery, without turning the type into the main event. */
.motion-reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.motion-reveal.is-visible { opacity: 1; transform: translateY(0); }
.project strong { transition: transform .45s cubic-bezier(.2,.8,.2,1), letter-spacing .45s ease; }
.project:hover strong { transform: translateX(10px); letter-spacing: -.04em; }
.text-link span { display: inline-block; transition: transform .3s ease; }
.text-link:hover span { transform: translate(5px,-5px); }
.project i,.round-link b,.email-arrow,.site-nav i,.inquiry-form button span { display:inline-block; transition:transform .3s ease; }
.project:hover i,.round-link:hover b,.email-arrow:hover,.site-nav a:hover i,.inquiry-form button:hover span { transform:translate(5px,-5px); }
.form-honeypot{position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}
.email-link .email-address{font:inherit;letter-spacing:inherit}
@media (prefers-reduced-motion: reduce) { .motion-reveal { opacity: 1; transform: none; transition: none; } .project strong,.text-link span { transition: none; } }

.email-row { margin-top: auto; padding-top: 9vw; padding-bottom: 16px; border-bottom: 1px solid rgba(175,220,224,.6); display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.email-row .email-link { display: block; flex: 1; margin: 0; padding: 0; border: 0; }
.email-arrow { display: grid; place-items: center; flex: none; width: 1.2em; height: 1.2em; color: #AFDCE0; font-size: clamp(30px,4vw,60px); line-height: .8; text-decoration: none; }

/* Give the section display type room to breathe. */
.work-section h2,
.support-section h2,
.about-section h2,
.contact-section h2 { line-height: .88; }
.contact-section h2 { font-size: clamp(70px, 12.7vw, 210px); line-height: .92; }
/* Keep the image-led cards; only the large title sits below the artwork. */
.project { padding: 0; display: flex; flex-direction: column; background: transparent; }
.project-image {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  background-position: center top;
  background-size: cover;
}
.project-rum .project-image { background-image: linear-gradient(0deg,rgba(124,16,48,.88),rgba(124,16,48,.08)),url('assets/work/rum-club.png'); }
.project-kasa .project-image { background-image: linear-gradient(0deg,rgba(175,220,224,.82),rgba(175,220,224,.08)),url('assets/work/kasa-kin.jpg'); }
.project-halina .project-image { background-image: linear-gradient(0deg,rgba(238,199,111,.84),rgba(238,199,111,.08)),url('assets/work/halina.jpg'); }
.project-image span,
.project-image small { width: 100%; font-size: 11px; line-height: 1.15; text-transform: uppercase; letter-spacing: .09em; }
.project-image i { position: absolute; right: 15px; bottom: 12px; font-size: 27px; font-style: normal; }
.project-rum .project-image span,.project-rum .project-image small,.project-rum .project-image i{color:#AFDCE0;text-shadow:0 1px 9px rgba(38,4,14,.8)}
.project-kasa .project-image span,.project-kasa .project-image small,.project-kasa .project-image i{color:#FDF7D4;text-shadow:0 1px 9px rgba(38,4,14,.85)}
.project-halina .project-image span,.project-halina .project-image small,.project-halina .project-image i{color:#7C1030;text-shadow:0 1px 9px rgba(253,247,212,.9)}
.project > strong {
  min-height: 27%;
  margin: 0;
  padding: 14px 18px 11px;
  font: clamp(36px,4.25vw,70px)/.76 Gunter,sans-serif;
  letter-spacing: -.055em;
}
.project-rum > strong { background: #7C1030; color: #AFDCE0; }
.project-kasa > strong { background: #AFDCE0; color: #7C1030; }
.project-halina > strong { background: #EEC76F; color: #7C1030; }
.project-halina > strong em { color: inherit; }

/* Keep the hero sun/sea form true to the palette rather than blending purple. */
.sun-disc { display: none; }
.tide-graphic { display: none; }

/* A hand-drawn, slow-swell wave: the new Dia Mar hero signature. */
.wave-mark {
  position: absolute;
  z-index: 0;
  width: min(33vw, 480px);
  height: auto;
  right: 4vw;
  top: 13vh;
  overflow: visible;
  animation: wave-swell 5.5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
.wave-mark { display: none; }

/* The live motif: a restrained, animated horizon beneath the hero type. */
.live-horizon { position: absolute; z-index: 0; top: 31vh; left: -7vw; width: 114vw; height: 54px; border-top: 2px solid rgba(175,220,224,.22); transform: skewY(-1.4deg); animation: live-swell 7s ease-in-out infinite; }
.live-horizon { display: block; }
.live-horizon::before,.live-horizon::after { content: ""; position: absolute; left: 0; width: 100%; height: 20px; border-top: 1px solid rgba(253,247,212,.22); transform: translateY(18px) skewY(-1deg); }
.live-horizon::after { border-color: rgba(175,220,224,.18); transform: translateY(37px) skewY(1deg); }
.live-horizon i { position: absolute; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #EEC76F; animation: horizon-drift 10s linear infinite; }
.live-horizon i:nth-child(1) { left: 18%; }.live-horizon i:nth-child(2) { left: 51%; animation-delay: -2.7s; }.live-horizon i:nth-child(3) { left: 82%; animation-delay: -5.4s; }
@keyframes live-swell { 50% { transform: translateY(-10px) skewY(1.4deg); } }
@keyframes horizon-drift { 50% { transform: translateX(65px) translateY(-5px); } }

/* Rising-sun direction: cropped to the upper-right, behind, not over, the type. */
.live-sun { position: absolute; z-index: 0; width: min(26vw, 470px); aspect-ratio: 1; right: 4vw; top: 14vh; border: clamp(8px,1vw,17px) solid rgba(175,220,224,.82); border-radius: 50%; opacity: .82; animation: sun-rise 6s ease-in-out infinite; }
.live-sun { display: none; }
.live-sun b { position: absolute; inset: 18%; border-radius: 50%; background: rgba(253,247,212,.88); }
.live-sun i { position: absolute; z-index: -1; width: 3px; height: clamp(26px,3vw,55px); background: #AFDCE0; left: 50%; top: calc(-1 * clamp(35px,4vw,70px)); transform-origin: 1px calc(clamp(35px,4vw,70px) + 4vw); }
.live-sun i:nth-child(2) { transform: rotate(45deg); }.live-sun i:nth-child(3) { transform: rotate(-45deg); }.live-sun i:nth-child(4) { transform: rotate(90deg); }
@keyframes sun-rise { 50% { transform: translateY(-14px); } }
.wave-body { fill: #AFDCE0; }
.wave-crest { stroke: #FDF7D4; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; animation: crest-roll 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.wave-foam { stroke: #7C1030; stroke-width: 12; stroke-linecap: round; animation: foam-pulse 2.2s ease-in-out infinite; }
.wave-dot { fill: #FDF7D4; animation: dot-bob 1.6s ease-in-out infinite; }
@keyframes wave-swell { 50% { transform: translate(-14px, 9px) rotate(-4deg) scale(1.035); } }
@keyframes crest-roll { 50% { transform: rotate(5deg) translateY(-6px); } }
@keyframes foam-pulse { 50% { stroke-width: 5; opacity: .5; } }
@keyframes dot-bob { 50% { transform: translateY(-13px); } }

/* Dia Mar's signature visual: a cropped, moving tide made from its own name. */
.tide-graphic {
  position: absolute;
  z-index: 0;
  width: min(68vw, 980px);
  right: -13vw;
  top: 10vh;
  color: #AFDCE0;
  font: clamp(28px, 4.2vw, 76px)/.76 Gunter, sans-serif;
  letter-spacing: -.06em;
  transform: rotate(-12deg);
  opacity: .94;
  overflow: hidden;
  pointer-events: none;
}
.tide-graphic span { display: block; white-space: nowrap; }
.tide-graphic span:nth-child(2) { transform: translateX(-9vw); color: #FDF7D4; }
.tide-graphic span:nth-child(3) { transform: translateX(3vw); }
.tide-graphic i { display: block; width: 140%; height: 3px; margin: 9px 0; background: #AFDCE0; transform: skewX(-26deg); }
.support-section .orb { display: none; }

/* Conversion-focused retainer details */
.retainer-panel {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  margin-top: 7vw;
  border: 1px solid rgba(175, 220, 224, .6);
  color: #FDF7D4;
}
.panel-label { margin: 0; padding: 16px 18px; border-bottom: 1px solid rgba(175, 220, 224, .6); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.retainer-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.retainer-steps span { min-height: 190px; padding: 18px; border-right: 1px solid rgba(175, 220, 224, .6); font-size: 11px; letter-spacing: .08em; }
.retainer-steps span:last-child { border-right: 0; }
.retainer-steps .step-number { display: block; color: inherit; font-style: normal; }
.retainer-steps b { display: block; margin: 44px 0 9px; font: clamp(23px, 2.4vw, 39px)/.88 Gunter, sans-serif; letter-spacing: -.04em; }
.retainer-steps small { display: block; max-width: 240px; font: 15px/1.25 "Acherus Grotesque",Arial,sans-serif; letter-spacing: 0; }
.availability { display: flex; align-items: center; gap: 14px; padding: 20px 18px; background: #AFDCE0; color: #7C1030; }
.availability p { flex: 1; margin: 0; font-size: 15px; line-height: 1.25; }
.availability b { font: 22px/.9 Gunter, sans-serif; letter-spacing: -.03em; }
.availability a { color: inherit; text-decoration: none; font-size: 13px; border-bottom: 1px solid currentColor; padding-bottom: 4px; white-space: nowrap; }
.pulse { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #EEC76F; animation: pulse 1.7s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.7); opacity: .45; } }

/* A short, useful form that feels like part of the art direction. */
.inquiry-form { width: min(100%, 800px); margin: 7vw 0 0 auto; position: relative; z-index: 1; }
.inquiry-form > p { margin: 0 0 14px; font-size: 17px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(253,247,212,.6); border-left: 1px solid rgba(253,247,212,.6); }
.inquiry-form label { display: block; padding: 11px 14px 14px; border-right: 1px solid rgba(253,247,212,.6); border-bottom: 1px solid rgba(253,247,212,.6); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.inquiry-form .message-field, .inquiry-form .company-field, .inquiry-form .work-kind-field { grid-column: 1 / -1; }
.inquiry-form input,.inquiry-form select,.inquiry-form textarea { display: block; width: 100%; border: 0; border-radius: 0; outline: 0; background: transparent; color: #FDF7D4; padding: 10px 0 0; font: 16px/1.25 "Acherus Grotesque",Arial,sans-serif; letter-spacing: 0; text-transform: none; }
.inquiry-form select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fdf7d4'/%3E%3C/svg%3E") no-repeat right 4px center / 10px 6px; }
.inquiry-form option { background: #7C1030; }
.inquiry-form textarea { resize: vertical; }
.inquiry-form input::placeholder,.inquiry-form textarea::placeholder { color: rgba(253,247,212,.55); }
.inquiry-form button { margin-top: 15px; border: 0; border-radius: 0; padding: 15px 18px; background: #AFDCE0; color: #7C1030; font: 18px Gunter,sans-serif; letter-spacing: -.03em; cursor: pointer; }
.inquiry-form button span { font-family: "Acherus Grotesque",Arial,sans-serif; margin-left: 28px; }
.inquiry-form small { display: block; margin-top: 10px; opacity: .7; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 700px) {
  .hero h1 { font-size: 16.5vw; line-height: .88; }
  .contact-section h2 { font-size: 18vw; line-height: .92; }
  .tide-graphic { width: 95vw; top: 19vh; right: -30vw; font-size: 9vw; }
  .wave-mark { width: 54vw; right: -5vw; top: 23vh; }
  .live-horizon { top: 34vh; height: 46px; border-top-width: 1px; }
  .live-sun { width: 48vw; right: -8vw; top: 21vh; opacity: .65; }
  .retainer-panel { margin-top: 17vw; }
  .retainer-steps { display: block; }
  .retainer-steps span { display: block; min-height: 0; padding: 15px; border-right: 0; border-bottom: 1px solid rgba(175, 220, 224, .6); }
  .retainer-steps b { margin: 22px 0 7px; font-size: 9vw; }
  .availability { display: grid; grid-template-columns: 10px 1fr; }
  .availability a { grid-column: 2; justify-self: start; margin-top: 5px; }
  .inquiry-form { margin-top: 18vw; }
  .form-grid { grid-template-columns: 1fr; }
  .inquiry-form .message-field { grid-column: auto; }
}

/* Keep Unicode arrows as typographic symbols on iOS, never emoji. */
body { font-variant-emoji: text; }

/* Phone headlines keep their impact without running off-screen. */
@media (max-width: 700px) {
  .hero h1 { font-size: 11.8vw; line-height: .9; letter-spacing: -.065em; }
  .hero h1 span { white-space: nowrap; }
  .contact-section h2 { font-size: 14vw; line-height: .94; }
}

/* Keep the motif as a graphic signature, never a rival to the main message. */
.tide-graphic {
  width: min(31vw, 440px);
  right: 5vw;
  top: 15vh;
  font-size: clamp(19px, 2.15vw, 37px);
  line-height: .84;
  transform: rotate(-8deg);
  opacity: .78;
  animation: tide-drift 8s ease-in-out infinite;
}
.tide-graphic span:nth-child(2) { transform: translateX(-2.5vw); }
.tide-graphic span:nth-child(3) { transform: translateX(1vw); }
.tide-graphic i { display: none; }
@keyframes tide-drift { 50% { transform: rotate(-8deg) translateX(-10px); } }

@media (max-width: 700px) {
  .tide-graphic {
    width: 48vw;
    right: 8vw;
    top: 20vh;
    font-size: 5vw;
    line-height: .84;
  }
  .tide-graphic span:nth-child(2) { transform: translateX(-3vw); }
  .tide-graphic span:nth-child(3) { transform: translateX(1vw); }
}

/* Phone home page: retain the composition without horizontal overflow. */
@media (max-width: 700px) {
  body { overflow-x: hidden; }
  .hero h1 { font-size: 11.3vw; line-height: .92; }
}

/* Slightly quieter home-page display scale. */
.hero h1{font-size:clamp(74px,11vw,210px)}
@media(max-width:700px){.hero h1{font-size:10.7vw;line-height:.92}}

/* The home email row stays within a narrow phone screen without losing its single-line feel. */
@media(max-width:700px){.email-row{gap:8px}.email-row .email-link{min-width:0;font-size:4.5vw;overflow-wrap:anywhere}.email-arrow{font-size:7vw}.ticker{margin:0 -20px;contain:paint}.live-horizon{left:0;width:100%}}

/* Home-page actions use the same tactile bounce as the inner pages. */
.round-link,.text-link,.email-arrow,.email-link,.inquiry-form button,.contact-section footer a{transform-origin:center}
.round-link:hover,.round-link:focus-visible,.text-link:hover,.text-link:focus-visible,.email-arrow:hover,.email-arrow:focus-visible,.email-link:hover,.email-link:focus-visible,.inquiry-form button:hover,.inquiry-form button:focus-visible,.contact-section footer a:hover,.contact-section footer a:focus-visible{animation:home-action-bounce .62s cubic-bezier(.2,.85,.35,1)}
@keyframes home-action-bounce{0%,100%{transform:translate(0,0)}35%{transform:translate(7px,-10px)}62%{transform:translate(3px,-4px)}80%{transform:translate(5px,-7px)}}
@media(prefers-reduced-motion:reduce){.round-link,.text-link,.email-arrow,.email-link,.inquiry-form button,.contact-section footer a{animation:none!important;transition:none!important}}

/* Keep the home-page display statements bold, but let the surrounding content breathe. */
.support-section h2{font-size:clamp(54px,8vw,128px);line-height:.84}
.about-section h2{font-size:clamp(52px,7.5vw,122px);line-height:.86}
.about-section .about-copy{font-size:clamp(16px,1.35vw,21px);line-height:1.32}
.about-section .about-copy p{margin:0 0 1em}
.about-section .about-copy p:last-child{margin-bottom:0}
.contact-section h2{font-size:clamp(56px,9vw,148px);line-height:.86}

/* CSS-drawn arrow: avoids iOS turning an arrow glyph into an emoji. */
.arrow-icon{display:inline-block;position:relative;width:.86em;height:.86em;margin-left:.2em;vertical-align:-.04em;color:currentColor}
.arrow-icon::before{content:"";position:absolute;left:.06em;bottom:.1em;width:.98em;height:1.5px;background:currentColor;transform:rotate(-45deg);transform-origin:left center}
.arrow-icon::after{content:"";position:absolute;right:.03em;top:.03em;width:.38em;height:.38em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.arrow-icon--down::before{transform:rotate(45deg);transform-origin:left center;bottom:.76em}.arrow-icon--down::after{top:auto;bottom:.03em;transform:rotate(90deg)}
.round-link b .arrow-icon{display:block;margin:.15em auto 0;font-size:22px}

@media(max-width:700px){
  .support-section h2{font-size:12.5vw;line-height:.9}
  .about-section h2{font-size:12vw;line-height:.9}
  .about-section .about-copy{font-size:16px;line-height:1.35}
  .contact-section h2{max-width:100%;font-size:12vw;line-height:.9;overflow-wrap:anywhere}
}

/* Longer approved hero copy may wrap naturally, using the existing display type. */
.hero h1 span { white-space: normal; }
.hero-copy { min-width: 0; }
.hero-bottom > .round-link { flex-shrink: 0; }
.support-section > h2, .support-copy { min-width: 0; }
/* Reuse the compact availability pattern without its unused status-dot column. */
@media(max-width:700px){
  .support-section .availability { grid-template-columns: 1fr; }
  .support-section .availability a { grid-column: 1; }
}

/* Oversized blue hook on two lines, with a substantial cream introduction. */
.hero h1 { font-size: min(9vw, 172px); }
.hero h1 > span { white-space: normal; }
.hero h1 > .hero-intro { font-size: .625em; }
.hero h1 > span:nth-child(3) { font-size: 1em; letter-spacing: -.1em; }
@media(max-width:700px){
  .hero h1 { font-size:10.7vw; }
}