/*
Theme Name: Halmai Productions
Author: Halmai Productions
Description: Editable portfolio based on the approved Halmai Productions design. Homepage: Appearance > Customize. Projects: References. Articles: Posts.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: halmai-productions
License: GPL-2.0-or-later
*/
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:25px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-family);
  font-size:16px;
  line-height:1.6}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  color:inherit;
  cursor:pointer}
a,button {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px}
button:disabled {
  cursor:default}
img {
  display:block;
  max-width:100%}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  font-weight:400}
h1,h2 {
  font-family:var(--font-family);
  line-height:1.03;
  letter-spacing:-.045em}
h1 {
  font-size:clamp(58px,7.7vw,108px)}
h2 {
  font-size:clamp(39px,4.5vw,64px)}
h3 {
  font-family:var(--font-family);
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.025em}
em {
  font-weight:400}
button {
  background:none;
  border:0}
section[id] {
  scroll-margin-top:25px}
.header {
  max-width:1440px;
  margin:auto;
  padding:28px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--line)}
.wordmark {
  font-family:var(--font-family);
  font-size:28px;
  line-height:1;
  letter-spacing:.07em}
.wordmark span {
  display:block;
  font-family:var(--font-family);
  font-size:9px;
  letter-spacing:.4em;
  margin-top:8px}
.header nav {
  display:flex;
  gap:32px;
  font-size:13px}
.header nav a:hover,.text-link:hover {
  color:var(--accent)}
.contact-nav {
  font-size:13px;
  border-bottom:1px solid;
  padding:4px 0}
.contact-nav span {
  margin-left:24px}
.hero {
  max-width:1440px;
  margin:auto}
.hero-copy {
  padding:65px 9% 43px}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  line-height:1.5}
.hero-copy>.eyebrow {
  margin-bottom:24px;
  color:var(--accent)}
.hero-bottom {
  margin-top:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.hero-bottom p {
  color:var(--muted);
  font-size:15px;
  line-height:1.65}
.button {
  display:inline-flex;
  gap:55px;
  align-items:center;
  padding:15px 23px;
  background:var(--accent);
  color:white;
  font-size:14px;
  transition:background .2s}
.button:hover {
  background:var(--detail-color-1)}
.studio-strip {
  height:285px;
  position:relative;
  background:var(--detail-color-2);
  margin:0 5%;
  overflow:hidden}
.studio-strip img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 48%;
  filter:brightness(.7)}
.studio-caption {
  position:absolute;
  bottom:24px;
  left:28px;
  right:28px;
  color:var(--detail-color-3);
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase}
.genre-line {
  display:flex;
  gap:32px;
  margin:0 5%;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:var(--muted)}
.genre-line>a {
  margin-left:auto;
  color:var(--ink)}
.genre-line>a span {
  margin-left:18px}
.section {
  max-width:1440px;
  margin:auto;
  padding:95px 9%}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:36px}
.section-heading .eyebrow {
  margin-bottom:16px;
  color:var(--muted)}
.text-link {
  font-size:13px;
  border-bottom:1px solid var(--ink);
  padding-bottom:5px;
  white-space:nowrap}
.filter-bar {
  display:flex;
  gap:28px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px}
.filter-bar button {
  font-size:12px;
  padding:0 0 13px;
  position:relative}
.filter-bar button[aria-pressed=true] {
  color:var(--accent)}
.filter-bar button[aria-pressed=true]:after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:2px;
  background:var(--accent)}
.filter-bar span {
  font-size:9px;
  margin-left:7px}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px 28px}
.project[hidden] {
  display:none}
.video {
  aspect-ratio:16/9;
  background:var(--detail-color-4);
  overflow:hidden;
  position:relative}
.video-launch {
  display:block;
  position:relative;
  padding:0;
  width:100%;
  height:100%;
  color:white;
  text-align:left}
.video-launch img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.82);
  transition:filter .25s,transform .4s}
.video-launch:hover img {
  filter:brightness(1);
  transform:scale(1.025)}
.play {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--detail-color-5);
  border-radius:50%;
  font-size:14px;
  background:var(--detail-color-6);
  padding-left:3px}
.video-label {
  position:absolute;
  bottom:14px;
  left:16px;
  font-size:10px;
  letter-spacing:.04em;
  background:var(--detail-color-7);
  padding:3px 7px}
.video iframe {
  width:100%;
  height:100%;
  border:0}
.project-meta {
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:18px}
.project-meta .eyebrow {
  font-size:9px;
  color:var(--muted);
  letter-spacing:.09em;
  margin-bottom:7px}
.project-meta h3 {
  font-size:25px}
.genre {
  font-size:10px;
  white-space:nowrap;
  color:var(--muted);
  padding-top:3px}
.services {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px;
  border-top:1px solid var(--line)}
.services-intro .eyebrow {
  color:var(--accent);
  margin-bottom:22px}
.services-intro>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin:25px 0}
.service-list article {
  display:flex;
  gap:25px;
  padding:25px 0;
  border-top:1px solid var(--line)}
.service-list article>span {
  font-size:10px;
  color:var(--muted);
  padding-top:5px}
.service-list p {
  font-size:14px;
  color:var(--muted);
  margin-top:12px;
  max-width:390px}
.service-list .quote-note {
  font-size:12px;
  border-top:1px solid var(--line);
  padding-top:22px}
.about {
  background:var(--detail-color-8);
  max-width:none;
  padding-left:max(9%,calc((100vw - 1180px)/2));
  padding-right:max(9%,calc((100vw - 1180px)/2))}
.about>.eyebrow {
  margin-bottom:30px}
.about-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px}
.about-grid p {
  font-size:15px;
  color:var(--detail-color-9);
  margin-bottom:20px}
.about-details {
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  padding-top:20px;
  border-top:1px solid var(--detail-color-10);
  font-size:10px}
.process h2 {
  font-size:clamp(35px,3.7vw,51px)}
.process ol {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  list-style:none;
  margin:40px 0 0;
  padding:0}
.process li {
  border-top:1px solid var(--line);
  padding-top:20px}
.process li>span {
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent)}
.process h3 {
  font-size:24px;
  margin:19px 0 13px}
.process li p {
  font-size:13px;
  color:var(--muted)}
.contact-section {
  background:var(--detail-color-11);
  color:var(--paper);
  padding:80px 7%;
  text-align:center}
.contact-section>.eyebrow {
  color:var(--detail-color-12);
  margin-bottom:24px}
.contact-section h2 {
  font-size:clamp(42px,5.8vw,78px)}
.contact-section>p:not(.eyebrow):not(.sr-only) {
  font-size:14px;
  color:var(--detail-color-12);
  margin:25px 0}
.button.light {
  background:var(--paper);
  color:var(--ink);
  margin-top:6px}
.button.light:hover {
  background:var(--detail-color-13)}
.email-link {
  display:block;
  width:fit-content;
  margin:25px auto 0;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:5px}
footer {
  max-width:1440px;
  margin:auto;
  padding:40px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px}
footer p {
  font-size:10px;
  color:var(--muted);
  margin-top:18px}
.footer-links {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:11px}
.footer-links button {
  font-size:11px;
  padding:0}
.skip-link {
  position:absolute;
  top:-100px;
  left:15px;
  padding:10px;
  background:var(--paper);
  z-index:20}
.skip-link:focus {
  top:10px}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0}
.consent {
  position:fixed;
  z-index:10;
  bottom:20px;
  left:20px;
  right:20px;
  max-width:620px;
  padding:24px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 4px 30px var(--detail-color-14)}
.consent[hidden] {
  display:none}
.consent p {
  font-size:12px}
.consent a {
  text-decoration:underline}
.consent>div {
  display:flex;
  gap:12px;
  margin-top:16px}
.consent button {
  border:1px solid var(--line);
  padding:8px 15px;
  font-size:12px}
.consent #accept-analytics {
  background:var(--accent);
  color:white}
.privacy-main {
  max-width:750px;
  margin:0 auto;
  padding:70px 25px}
.privacy-main h1 {
  font-size:55px}
.privacy-main h2 {
  font-family:var(--font-family);
  font-size:21px;
  letter-spacing:0;
  margin:30px 0 12px}
.privacy-main p {
  margin:15px 0}
.privacy-main a {
  text-decoration:underline}

@media(min-width:1500px) {
  .about {
  padding-left:calc((100vw - 1180px)/2);
  padding-right:calc((100vw - 1180px)/2)}
}

@media(max-width:900px) {
  .header {
  padding:23px 5%;
  gap:18px}
.header nav {
  gap:20px;
  font-size:12px}
.hero-copy {
  padding:55px 6% 35px}
.section {
  padding:70px 6%}
.studio-strip {
  height:260px}
.services {
  gap:45px}
.about {
  padding:65px 6%}
.about-grid {
  gap:35px}
.project-meta {
  display:block}
.genre {
  display:block;
  margin-top:8px}
.process ol {
  gap:22px}
.footer-links {
  max-width:290px}
}

@media(max-width:600px) {
  .header {
  flex-wrap:wrap;
  padding:21px 6% 14px;
  row-gap:20px}
.wordmark {
  font-size:24px}
.wordmark span {
  font-size:8px}
.header nav {
  order:3;
  width:100%;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:13px}
.contact-nav {
  font-size:12px}
.contact-nav span {
  margin-left:17px}
.hero-copy {
  padding:40px 6% 32px}
h1 {
  font-size:clamp(49px,11.8vw,72px)}
.hero-copy>.eyebrow {
  font-size:9px;
  margin-bottom:22px}
.hero-bottom {
  display:block;
  margin-top:25px}
.hero-bottom p {
  font-size:14px}
.hero-bottom .button {
  margin-top:23px}
.desktop-break {
  display:none}
.studio-strip {
  height:210px;
  margin:0 6%}
.studio-caption {
  bottom:18px;
  left:17px;
  right:17px;
  font-size:8px}
.studio-caption span:first-child {
  display:none}
.genre-line {
  margin:0 6%;
  gap:19px;
  flex-wrap:wrap;
  font-size:10px;
  padding:17px 0}
.genre-line a {
  width:100%;
  margin-left:0;
  margin-top:3px}
.genre-line>a span {
  float:right}
.section {
  padding:55px 6%}
.section-heading {
  display:block;
  margin-bottom:25px}
.section-heading .text-link {
  display:inline-block;
  margin-top:23px}
.section-heading .eyebrow {
  margin-bottom:14px}
.filter-bar {
  gap:22px;
  margin-bottom:24px}
.filter-bar button {
  font-size:11px}
.filter-bar span {
  display:none}
.project-grid {
  grid-template-columns:1fr;
  gap:30px}
.project-meta {
  display:flex}
.project-meta h3 {
  font-size:25px}
.genre {
  font-size:9px;
  margin-top:0}
.video-label {
  font-size:9px}
.services {
  grid-template-columns:1fr;
  gap:32px}
.services-intro h2 br {
  display:none}
.about {
  padding:55px 6%}
.about-grid {
  grid-template-columns:1fr;
  gap:28px}
.about h2 {
  font-size:40px}
.process ol {
  grid-template-columns:1fr;
  gap:25px;
  margin-top:28px}
.process h3 {
  margin:12px 0 9px}
.contact-section {
  padding:58px 6%}
.contact-section h2 {
  font-size:43px}
footer {
  padding:30px 6%;
  align-items:start;
  flex-direction:column;
  gap:24px}
.footer-links {
  max-width:none;
  font-size:10px;
  gap:16px}
.consent {
  bottom:10px;
  left:10px;
  right:10px;
  padding:18px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
* {
  transition:none!important}
}


/* Brand refresh: original white, charcoal and orange;
   modern sans typography. */
h1,h2,h3 {
  font-family:var(--font-family);
  font-weight:650;
  letter-spacing:-.045em}
h1 {
  font-size:clamp(44px,5.5vw,76px);
  max-width:1050px;
  line-height:1.08}
h2 {
  font-size:clamp(34px,3.9vw,54px)}
h3 {
  font-size:23px;
  letter-spacing:-.025em}
em {
  font-style:normal;
  font-weight:inherit;
  color:var(--accent-text)}
.hero-copy {
  padding:64px 9% 44px}
.hero-copy>.eyebrow,.services-intro .eyebrow,.process li>span {
  color:var(--accent-text)}
.button {
  background:var(--accent);
  color:var(--detail-color-15);
  font-weight:600;
  gap:35px}
.button:hover {
  background:var(--detail-color-16)}
.brand-logo {
  width:210px;
  height:auto}
.header {
  gap:24px;
  padding:20px 5%}
.header nav {
  gap:24px}
.header nav a:hover,.text-link:hover {
  color:var(--accent-text)}
.wordmark {
  flex-shrink:0}
.social-bar {
  max-width:1440px;
  margin:auto;
  padding:12px 5% 0;
  display:flex;
  justify-content:flex-end}
.social-icons {
  display:flex;
  gap:12px;
  align-items:center}
.social-icons a {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  color:var(--detail-color-17)}
.social-icons a:hover {
  color:var(--accent-text)}
.social-icons svg {
  display:block}
.contact-nav {
  font-weight:600}
.filter-bar button[aria-pressed=true] {
  color:var(--accent-text)}
.studio-strip {
  height:320px}
.studio-strip img {
  filter:brightness(.82)}
.project-meta h3 {
  font-size:24px}
.services {
  display:block;
  border-top:1px solid var(--line);
  background:var(--detail-color-8);
  max-width:none;
  padding-left:max(9%,calc((100vw - 1180px)/2));
  padding-right:max(9%,calc((100vw - 1180px)/2))}
.service-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px}
.service-list article {
  display:block;
  padding:26px 0;
  min-width:0}
.service-icon {
  width:64px;
  height:64px;
  object-fit:contain;
  margin-bottom:24px}
.service-list h3 {
  font-size:21px;
  line-height:1.3}
.service-list p {
  max-width:none;
  line-height:1.7}
.about {
  background:var(--detail-color-3);
  border-bottom:1px solid var(--line)}
.about-grid {
  grid-template-columns:.8fr 1.3fr;
  gap:90px}
.about h2 {
  margin-top:18px}
.about-grid .about-name {
  margin-top:30px;
  font-size:14px;
  color:var(--muted)}
.about-grid strong {
  font-weight:600;
  color:var(--ink)}
.price-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  margin-top:24px}
.pricing-label {
  font-size:17px;
  color:var(--muted);
  font-weight:500}
.price-grid article {
  padding:25px 0;
  border-top:2px solid var(--accent)}
.price-grid p {
  font-size:14px;
  color:var(--muted);
  margin-top:12px}
.price-grid .price,.price {
  font-size:32px;
  font-weight:650;
  color:var(--ink);
  margin-top:24px;
  letter-spacing:-.04em}
.price span {
  font-size:13px;
  font-weight:500;
  letter-spacing:0}
.recording-price {
  border-top:1px solid var(--line);
  margin-top:32px;
  padding-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px}
.recording-price p:not(.price) {
  font-size:14px;
  color:var(--muted);
  margin-top:10px}
.recording-price .price {
  margin:0;
  white-space:nowrap}
.process {
  border-top:1px solid var(--line)}
.contact-section h2 em {
  color:var(--detail-color-18)}
.contact-section h2 {
  font-size:clamp(38px,4.7vw,64px)}
.button.light {
  background:var(--accent);
  color:var(--detail-color-15)}
.button.light:hover {
  background:var(--detail-color-16)}
.footer-links {
  align-items:center;
  gap:24px}
footer .brand-logo {
  width:180px}
.consent #accept-analytics {
  color:var(--detail-color-15)}

@media(max-width:1000px) {
  .header {
  flex-wrap:wrap}
.header nav {
  order:3;
  width:100%;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:14px}
.brand-logo {
  width:185px}
.service-list {
  grid-template-columns:repeat(2,1fr)}
.services {
  padding:70px 6%}
.about-grid {
  gap:45px}
.social-bar {
  padding-top:8px}
}

@media(max-width:600px) {
  h1 {
  font-size:clamp(37px,9vw,52px)}
.hero-copy {
  padding:30px 6% 32px}
.header nav {
  gap:12px;
  font-size:11px;
  flex-wrap:wrap;
  justify-content:flex-start}
.brand-logo {
  width:160px}
.header {
  gap:16px}
.social-bar {
  padding:8px 6% 0}
.social-icons a {
  width:36px;
  height:36px}
.social-icons svg {
  width:20px;
  height:20px}
.studio-strip {
  height:220px}
.services {
  padding:55px 6%}
.service-list {
  grid-template-columns:1fr;
  gap:0}
.service-list article {
  display:flex;
  gap:22px}
.service-icon {
  width:48px;
  height:48px;
  flex-shrink:0;
  margin-bottom:0}
.service-list h3 {
  font-size:20px}
.about-grid {
  grid-template-columns:1fr;
  gap:24px}
.price-grid {
  grid-template-columns:1fr;
  gap:18px}
.price-grid article {
  padding:20px 0}
.recording-price {
  align-items:flex-start;
  flex-direction:column}
.contact-section h2 {
  font-size:38px}
.filter-bar {
  gap:18px}
.footer-links {
  gap:20px}
.footer-links .social-icons {
  width:100%}
}


/* Review refinements: compact header, aligned pricing and original contact photo. */
.header {
  padding-top:12px;
  padding-bottom:12px}
.header .brand-logo {
  width:180px}

.price-grid article {
  display:flex;
  flex-direction:column}
.price-grid article>p:not(.price) {
  flex:1}
.price-grid article>.price {
  white-space:nowrap}

.contact-section {
  background:var(--detail-color-11) url('assets/contact.webp') center center/cover no-repeat;
  position:relative;
  isolation:isolate}
.contact-section:before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.76);
  z-index:-1}
.contact-section h2 em {
  color:var(--detail-color-19)}
.contact-section>.eyebrow,.contact-section>p:not(.eyebrow):not(.sr-only) {
  color:var(--detail-color-13)}

@media(max-width:600px) {
  .header {
  padding-top:10px;
  padding-bottom:10px;
  row-gap:12px}
.header .brand-logo {
  width:150px}
.header nav {
  padding-top:10px}
}


/* WordPress content pages and article layouts. */
body.admin-bar .header { scroll-margin-top: 32px; }
.blog-content { max-width: 820px; margin: auto; padding: 60px 6%; }
.blog-content h1 { font-size: clamp(34px, 5vw, 60px); margin-bottom: 24px; }
.blog-content h2, .blog-content h3 { margin: 28px 0 14px; }
.blog-content p, .blog-content ul, .blog-content ol { margin: 16px 0; }
.blog-content a { text-decoration: underline; text-underline-offset: 3px; }
.blog-content img { height: auto; }
.blog-content iframe { max-width: 100%; }
.blog-entry { border-top: 1px solid var(--line); padding: 28px 0; }
.blog-entry h2 { font-size: 30px; }
.wp-block-button__link { background: var(--accent); color: var(--ink); }
.booking-section p { margin-top: 24px; }
.header .custom-logo { width: 180px; height: auto; }

/* Optional About me portrait: size and crop are defined below. */
.about-portrait {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-top: 28px;
  border-radius: 8px;
}

/* Campaign and enquiry presentation. */
.quote-section{max-width:1000px;margin:auto;text-align:center}
.quote-section h2{max-width:760px;margin:0 auto 24px}
.quote-intro{max-width:650px;margin:0 auto 36px;color:var(--muted)}
.campaign-content{max-width:1000px;margin:0 auto;padding:70px 6%;line-height:1.7}
.campaign-content h1{font-size:clamp(36px,6vw,66px);line-height:1.08;max-width:850px}
.campaign-content h2{font-size:clamp(28px,4vw,42px);margin-top:56px}
.campaign-content .wp-block-button__link{background:var(--accent);color:var(--ink);border-radius:0;padding:16px 24px}
.campaign-content .project-grid{margin:32px 0}
.campaign-content .hp-quote-form{margin:30px 0}
.campaign-page .header nav,.campaign-page .social-bar{display:none}
.header .contact-nav{max-width:230px}
.about-portrait{aspect-ratio:1.1 / 1;object-fit:cover;object-position:center top}
.blog-cta{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
@media(max-width:600px){.header .contact-nav{font-size:13px;max-width:150px}.header nav a{min-height:44px;display:inline-flex;align-items:center}.campaign-content{padding-top:40px}.quote-section{padding:48px 6%}.hp-quote-form{width:100%}}

.campaign-content .has-large-font-size{font-size:clamp(19px,2.1vw,25px);line-height:1.55}