/*
 * REDtone careers homepage - template-careers-home.php
 * Loaded ONLY on that template. Every rule is scoped under .rt-home (class prefix rh-)
 * so nothing here can leak into the site header/footer or any other page.
 */

/* ---- Page frame: let the template run full width under the site header ---- */
body.rt-home-page .site-content > .ast-container{ max-width:none !important; width:100% !important; padding:0 !important; display:block !important; }
body.rt-home-page .site-content{ background:#f6f2f1; }

/* ---- Base ---- */
.rt-home{
	--rh-red:#ED1C24;
	--rh-red-dark:#C00D14;
	--rh-gold:#FFC629;
	--rh-ink:#191113;
	--rh-paper:#F6F2F1;
	--rh-muted:#5f5456;
	--rh-hero-top:150px;
	font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	color:var(--rh-ink);
	background:var(--rh-paper);
	line-height:1.6;
	overflow-x:clip;
	-webkit-font-smoothing:antialiased;
}
.rt-home *,
.rt-home *::before,
.rt-home *::after{ box-sizing:border-box; }
/* plain selectors (not :where) so these beat the theme's element-level h1/p/blockquote styles */
.rt-home h1, .rt-home h2, .rt-home h3, .rt-home h4, .rt-home p,
.rt-home blockquote, .rt-home figure, .rt-home cite, .rt-home details, .rt-home summary{ margin:0; padding:0; }
/* The theme sets its own font (Rubik/Karla) directly on headings and text elements, which
   beats inheritance - make them follow .rt-home. (.rh-hand is more specific, so it still wins.) */
.rt-home :is(h1,h2,h3,h4,h5,h6,p,a,li,blockquote,cite,summary,button,figcaption,strong,em,b,span){ font-family:inherit; }
.rt-home img{ max-width:100%; height:auto; display:block; }
.rt-home a{ color:inherit; text-decoration:none; }
.rt-home .rh-wrap{ width:min(1180px, 100% - 40px); margin-inline:auto; }
.rt-home .rh-hand{ font-family:"Caveat Brush",cursive; font-weight:400; }
.rt-home .rh-section{ padding:110px 0; }

/* ---- Buttons ---- */
.rt-home .rh-btn{ display:inline-flex; align-items:center; gap:.5em; background:var(--rh-red); color:#fff; font-weight:800; font-size:1rem; line-height:1.2; padding:.95em 2em; border-radius:999px; box-shadow:0 6px 0 var(--rh-red-dark); transition:transform .2s, box-shadow .2s; }
.rt-home .rh-btn:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 9px 0 var(--rh-red-dark); }
.rt-home .rh-btn:focus-visible{ outline:3px solid var(--rh-gold); outline-offset:4px; }
.rt-home .rh-btn--white{ background:#fff; color:var(--rh-red); box-shadow:0 6px 0 rgba(0,0,0,.25); }
.rt-home .rh-btn--white:hover{ color:var(--rh-red); box-shadow:0 9px 0 rgba(0,0,0,.25); }

/* ---- Hero ---- */
.rt-home .rh-hero{ position:relative; background:var(--rh-red); color:#fff; padding:var(--rh-hero-top) 0 120px; overflow:hidden; clip-path:polygon(0 0,100% 0,100% 92%,62% 100%,58% 95%,0 99%); }
.rt-home .rh-hero::before{ content:"REDtone"; position:absolute; right:-5%; bottom:8%; font-size:clamp(120px,22vw,340px); font-weight:800; line-height:1; color:rgba(255,255,255,.06); letter-spacing:-.05em; transform:rotate(-8deg); pointer-events:none; }
.rt-home .rh-hero__grid{ position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.rt-home .rh-hero__eyebrow{ display:inline-block; font-size:1.6rem; color:var(--rh-gold); transform:rotate(-4deg); }
.rt-home .rh-hero h1{ font-size:clamp(3.2rem,8vw,6.5rem); line-height:.95; font-weight:800; letter-spacing:-.04em; margin:.2em 0 .3em; color:#fff; }
.rt-home .rh-sticker{ display:inline-block; background:#fff; color:var(--rh-red); padding:0 .18em; transform:rotate(-3deg); box-shadow:8px 8px 0 var(--rh-ink); }
.rt-home .rh-hero p{ font-size:1.2rem; max-width:32ch; margin-bottom:2rem; color:#fff; }
.rt-home .rh-hero__photo{ position:relative; background:#fff; padding:14px 14px 56px; transform:rotate(3deg); box-shadow:0 30px 60px rgba(0,0,0,.3); }
.rt-home .rh-hero__photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.rt-home .rh-photo-caption{ position:absolute; left:0; right:0; bottom:10px; text-align:center; color:var(--rh-ink); font-size:1.6rem; }
.rt-home .rh-tape{ position:absolute; top:-18px; left:50%; width:120px; height:34px; background:rgba(255,198,41,.85); transform:translateX(-50%) rotate(-4deg); }
/* hero entrance is CSS-only, so the first screen never waits for JavaScript */
@keyframes rh-rise{ from{ opacity:0; translate:0 30px; } to{ opacity:1; translate:0 0; } }
.rt-home .rh-hero__copy,
.rt-home .rh-hero__photo{ animation:rh-rise .8s ease both; }
.rt-home .rh-hero__photo{ animation-delay:.15s; }

/* ---- Marquee ---- */
.rt-home .rh-marquee{ position:relative; z-index:2; width:104%; margin:-40px -2% 0; padding:22px 0; background:var(--rh-ink); color:#fff; overflow:hidden; transform:rotate(-1.5deg); }
.rt-home .rh-marquee__track{ display:flex; gap:48px; width:max-content; animation:rh-scroll 28s linear infinite; font-size:clamp(1.6rem,4vw,3rem); font-weight:800; line-height:1.2; white-space:nowrap; }
.rt-home .rh-marquee__track span:nth-child(even){ color:var(--rh-gold); }
@keyframes rh-scroll{ to{ transform:translateX(-50%); } }

/* ---- Titles ---- */
.rt-home .rh-title{ font-size:clamp(2.4rem,5.5vw,4.4rem); font-weight:800; line-height:1.02; letter-spacing:-.035em; color:inherit; }
.rt-home .rh-underline{ position:relative; display:inline-block; white-space:nowrap; }
.rt-home .rh-underline svg{ position:absolute; left:-2%; bottom:-.22em; width:104%; height:.4em; overflow:visible; }

/* ---- Intro ---- */
.rt-home .rh-intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:60px; }
.rt-home .rh-polaroids{ position:relative; height:460px; }
.rt-home .rh-polaroid{ position:absolute; width:62%; background:#fff; padding:12px 12px 44px; box-shadow:0 18px 40px rgba(0,0,0,.15); transition:transform .3s; }
.rt-home .rh-polaroid img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.rt-home .rh-polaroid:nth-child(1){ top:0; left:0; transform:rotate(-6deg); }
.rt-home .rh-polaroid:nth-child(2){ top:120px; right:0; transform:rotate(5deg); }
.rt-home .rh-polaroid:nth-child(3){ bottom:0; left:14%; transform:rotate(-2deg); }
.rt-home .rh-polaroid:hover{ transform:rotate(0) scale(1.04); z-index:3; }
.rt-home .rh-intro__note{ position:absolute; right:0; bottom:10px; color:var(--rh-red); font-size:2rem; line-height:1; transform:rotate(-8deg); }
.rt-home .rh-intro__text p{ font-size:1.15rem; margin-bottom:1.2em; max-width:46ch; color:var(--rh-ink); }
.rt-home .rh-intro__text .rh-btn{ margin-top:.4em; }

/* ---- Core values ---- */
.rt-home .rh-values{ position:relative; background:var(--rh-red); color:#fff; clip-path:polygon(0 4%,40% 0,44% 3%,100% 1%,100% 97%,55% 100%,0 96%); }
.rt-home .rh-values .rh-title{ text-align:center; color:#fff; }
.rt-home .rh-values__sub{ text-align:center; font-size:1.8rem; color:var(--rh-gold); margin-top:.3em; }
.rt-home .rh-values__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:64px; }
.rt-home .rh-card{ position:relative; background:#fff; color:var(--rh-ink); padding:36px 30px 40px; border-radius:18px; box-shadow:10px 10px 0 var(--rh-ink); transition:transform .25s; }
.rt-home .rh-card:nth-child(1){ transform:rotate(-2deg); }
.rt-home .rh-card:nth-child(2){ transform:rotate(1.5deg) translateY(20px); }
.rt-home .rh-card:nth-child(3){ transform:rotate(-1deg); }
.rt-home .rh-card:hover{ transform:rotate(0) translateY(-8px); }
.rt-home .rh-card__num{ position:absolute; top:-26px; right:24px; width:56px; height:56px; border-radius:50%; background:var(--rh-gold); display:grid; place-items:center; font-weight:800; font-size:1.4rem; color:var(--rh-ink); }
.rt-home .rh-card__icon{ width:64px; height:64px; margin-bottom:18px; }
.rt-home .rh-card h3{ font-size:1.45rem; font-weight:800; line-height:1.15; margin-bottom:.6em; color:var(--rh-red); }
.rt-home .rh-card p{ color:#3d3335; }
.rt-home .rh-deco{ position:absolute; color:var(--rh-gold); font-size:3rem; line-height:1; opacity:.9; }

/* ---- Ambassador (landscape frame: the source photo is 530x290) ---- */
.rt-home .rh-amb__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:center; }
.rt-home .rh-amb__photo{ position:relative; background:#fff; padding:14px 14px 60px; transform:rotate(-3deg); box-shadow:0 24px 50px rgba(0,0,0,.18); }
.rt-home .rh-amb__photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 30%; }
.rt-home .rh-amb__photo .rh-photo-caption{ bottom:14px; font-size:1.7rem; }
.rt-home .rh-amb blockquote{ position:relative; font-size:clamp(2rem,4.2vw,3.4rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; color:var(--rh-ink); border:0; font-style:normal; background:none; }
.rt-home .rh-amb blockquote::before{ content:"\201C"; position:absolute; top:-.55em; left:-.1em; font-size:3.2em; line-height:1; color:var(--rh-red); }
.rt-home .rh-amb blockquote em{ font-style:normal; color:var(--rh-red); }
.rt-home .rh-amb cite{ display:block; margin-top:28px; font-style:normal; font-size:1.1rem; color:var(--rh-muted); }
.rt-home .rh-amb cite b{ display:block; font-size:1.3rem; color:var(--rh-ink); }

/* ---- Stories ---- */
.rt-home .rh-stories{ background:var(--rh-ink); color:#fff; overflow:hidden; }
.rt-home .rh-stories .rh-title{ color:#fff; }
.rt-home .rh-stories__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.rt-home .rh-stories__head p{ max-width:40ch; margin-top:20px; color:rgba(255,255,255,.8); }
.rt-home .rh-rail{ display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; padding:60px 20px 40px max(20px, calc((100% - 1180px) / 2)); scroll-padding-inline-start:max(20px, calc((100% - 1180px) / 2)); scrollbar-width:none; }
.rt-home .rh-rail::-webkit-scrollbar{ display:none; }
.rt-home .rh-story{ flex:0 0 300px; scroll-snap-align:start; background:#fff; color:var(--rh-ink); padding:12px 12px 22px; transition:transform .3s; }
.rt-home .rh-story:nth-child(odd){ transform:rotate(-2.5deg); }
.rt-home .rh-story:nth-child(even){ transform:rotate(2deg) translateY(16px); }
.rt-home .rh-story:hover,
.rt-home .rh-story:focus-visible{ transform:rotate(0) scale(1.04); }
.rt-home .rh-story:focus-visible{ outline:3px solid var(--rh-gold); outline-offset:4px; }
.rt-home .rh-story__img{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#ddd; }
.rt-home .rh-story__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.rt-home .rh-story:hover .rh-story__img img{ transform:scale(1.08); }
.rt-home .rh-story__play{ position:absolute; right:14px; bottom:14px; width:56px; height:56px; border-radius:50%; background:var(--rh-red); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.rt-home .rh-story__play svg{ width:20px; height:24px; margin-left:3px; }
.rt-home .rh-story h3{ font-size:1.4rem; font-weight:800; line-height:1.25; margin-top:14px; padding-inline:4px; color:var(--rh-ink); }
.rt-home .rh-story > span:not(.screen-reader-text){ display:block; font-size:.95rem; color:#555; padding-inline:4px; }
.rt-home .rh-rail-ctrl{ display:flex; gap:12px; }
.rt-home .rh-rail-ctrl button{ width:54px; height:54px; padding:0; border-radius:50%; border:2px solid #fff; background:none; color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; transition:background .2s, color .2s; }
.rt-home .rh-rail-ctrl button:hover,
.rt-home .rh-rail-ctrl button:focus-visible{ background:#fff; color:var(--rh-ink); }

/* ---- FAQ ---- */
.rt-home .rh-faq .rh-title{ text-align:center; margin-bottom:56px; }
.rt-home .rh-faq__list{ max-width:900px; margin-inline:auto; display:grid; gap:16px; }
.rt-home .rh-faq details{ background:#fff; border-radius:16px; border:2px solid #ece5e4; transition:border-color .2s; }
.rt-home .rh-faq details[open]{ border-color:var(--rh-red); }
.rt-home .rh-faq summary{ list-style:none; cursor:pointer; padding:24px 28px; font-weight:700; font-size:1.15rem; display:flex; justify-content:space-between; gap:20px; color:var(--rh-ink); }
.rt-home .rh-faq summary::-webkit-details-marker{ display:none; }
.rt-home .rh-faq summary::after{ content:""; flex:none; border:9px solid transparent; border-top-color:var(--rh-red); margin-top:10px; transition:transform .25s; transform-origin:50% 25%; }
.rt-home .rh-faq details[open] summary::after{ transform:rotate(180deg); }
.rt-home .rh-faq details p{ padding:0 28px 26px; color:#444; }
.rt-home .rh-faq details a{ color:var(--rh-red); font-weight:700; }

/* ---- CTA ---- */
.rt-home .rh-cta{ position:relative; background:var(--rh-red); color:#fff; text-align:center; overflow:hidden; clip-path:polygon(0 6%,30% 0,34% 5%,100% 0,100% 100%,0 100%); }
.rt-home .rh-cta .rh-title{ font-size:clamp(2.8rem,7vw,5.8rem); color:#fff; }
.rt-home .rh-cta p{ font-size:1.25rem; margin:18px auto 38px; max-width:40ch; color:#fff; }
.rt-home .rh-cta .rh-hand{ display:block; font-size:2rem; color:var(--rh-gold); transform:rotate(-3deg); }

/* ---- Reveal on scroll: only hides content when JavaScript is actually running ---- */
.rh-js .rt-home .rh-reveal{ opacity:0; translate:0 40px; transition:opacity .8s ease, translate .8s ease; }
.rh-js .rt-home .rh-reveal.is-in{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion:reduce){
	.rt-home .rh-marquee__track,
	.rt-home .rh-hero__copy,
	.rt-home .rh-hero__photo{ animation:none; }
	.rh-js .rt-home .rh-reveal{ opacity:1; translate:none; transition:none; }
}

/* ---- Tablet / phone ---- */
@media (max-width:900px){
	.rt-home{ --rh-hero-top:120px; }
	.rt-home .rh-section{ padding:80px 0; }
	.rt-home .rh-hero{ padding-bottom:100px; }
	.rt-home .rh-hero__grid,
	.rt-home .rh-intro__grid,
	.rt-home .rh-amb__grid{ grid-template-columns:1fr; }
	.rt-home .rh-hero__photo{ max-width:480px; margin-inline:auto; }
	.rt-home .rh-values__grid{ grid-template-columns:1fr; gap:48px; }
	.rt-home .rh-card:nth-child(n){ transform:none; }
	.rt-home .rh-polaroids{ height:380px; }
	.rt-home .rh-amb__photo{ max-width:480px; margin-inline:auto; }
}
@media (max-width:600px){
	.rt-home .rh-polaroids{ height:300px; }
	.rt-home .rh-intro__note{ font-size:1.6rem; }
	.rt-home .rh-story{ flex-basis:250px; }
	.rt-home .rh-hero__photo{ transform:rotate(2deg); }
}