@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,700&family=Cormorant+Garamond:ital,wght@1,600;1,700&family=Inter:wght@400;500;600&display=swap');

:root { --black:#090909; --ivory:#f1ede4; --muted:#a7a199; --orange:#ff4521; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--ivory); font-family:Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--orange); color:white; }

.site-header { height:84px; display:flex; align-items:center; gap:48px; padding:0 2.5vw; border-bottom:1px solid rgba(241,237,228,.32); position:absolute; z-index:20; width:100%; }
.brand { font:700 clamp(28px,2.4vw,42px)/1 "Barlow Condensed"; letter-spacing:.03em; }
.site-header nav { margin-left:auto; display:flex; gap:clamp(22px,3.4vw,52px); }
.site-header nav a { font:500 15px/1 Inter; position:relative; }
.site-header nav a:after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--orange); transition:.2s; }
.site-header nav a:hover:after { right:0; }
.header-cta { display:none; border:1px solid var(--ivory); padding:13px 18px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }

.hero { height:max(760px,100vh); min-height:760px; position:relative; overflow:hidden; }
.hero-image { position:absolute; inset:0; background:#080808 var(--hero-image) center/cover no-repeat; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.94) 25%,rgba(8,8,8,.27) 62%,rgba(8,8,8,.3) 100%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 40%); }
.hero-copy { position:absolute; z-index:2; left:2.7vw; top:clamp(125px,15vh,160px); width:min(590px,43vw); }
.eyebrow { color:#c9c4bb; text-transform:uppercase; letter-spacing:.12em; font-size:13px; display:flex; align-items:center; gap:14px; margin:0 0 30px; }
.eyebrow i { width:13px; height:13px; background:var(--orange); display:inline-block; }
.hero h1,.section h2 { font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.045em; margin:0; }
.hero h1 { font-size:clamp(78px,8.2vw,126px); line-height:.78; font-weight:800; }
.hero h1 em,.section h2 em { display:inline-block; color:var(--orange); font-family:"Cormorant Garamond",serif; font-weight:700; text-transform:none; line-height:.65; padding-right:.12em; }
.hero-lead { color:#c5c0b8; font-size:clamp(16px,1.35vw,21px); line-height:1.5; width:370px; max-width:100%; margin:28px 0 26px; }
.hero-actions,.contact-actions { display:flex; gap:16px; flex-wrap:wrap; }
.button { min-height:58px; display:inline-flex; align-items:center; justify-content:space-between; gap:30px; padding:0 24px; border:1px solid var(--ivory); font-size:15px; font-weight:500; transition:.18s ease; }
.button span { font-size:20px; }
.button.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
.button.primary:hover { transform:translateY(-2px); background:#ff6042; }
.button.secondary:hover { background:var(--ivory); color:var(--black); }
.hero-rail { z-index:2; position:absolute; right:1.2vw; top:16%; bottom:15%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; writing-mode:vertical-rl; font-size:13px; letter-spacing:.1em; }
.hero-rail:before,.hero-rail:after { content:""; width:1px; height:90px; background:#888; }
.hero-rail i { width:7px; height:7px; background:var(--orange); border-radius:50%; }
.scroll-cue { position:absolute; z-index:2; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:7px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; }
.scroll-cue span { color:var(--orange); font-size:20px; animation:bounce 1.6s infinite; }
@keyframes bounce { 50%{transform:translateY(6px)} }

.marquee { background:var(--orange); overflow:hidden; color:white; padding:17px 0; font:700 22px/1 "Barlow Condensed"; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.marquee div { width:max-content; animation:marquee 24s linear infinite; }
.marquee i { display:inline-block; width:8px; height:8px; background:var(--black); margin:0 28px 3px; transform:rotate(45deg); }
@keyframes marquee { to{ transform:translateX(-50%)} }

.section { padding:clamp(80px,10vw,150px) 4vw; }
.section-index { border-top:1px solid #494743; padding-top:14px; display:flex; justify-content:space-between; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:11px; }
.section-index p { margin:0; color:var(--ivory); }
.about-copy { margin:clamp(70px,9vw,130px) 0 0 21vw; }
.kicker { color:var(--orange); text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.about h2,.values h2 { font-size:clamp(68px,9vw,138px); line-height:.82; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4vw; margin:60px 0 0 25%; color:#b9b3aa; line-height:1.8; font-size:15px; }
.statement { border-top:1px solid #494743; border-bottom:1px solid #494743; margin-top:110px; padding:32px 0; display:grid; grid-template-columns:22% 1fr; gap:20px; }
.statement span { color:var(--orange); text-transform:uppercase; letter-spacing:.15em; font-size:11px; }
.statement p { font:500 clamp(26px,3vw,48px)/1.25 "Barlow Condensed"; text-transform:uppercase; max-width:950px; margin:0; }

.programs { background:#111; }
.section-heading { display:grid; grid-template-columns:1fr .42fr; gap:8vw; align-items:end; }
.section-heading h2,.gallery-heading h2 { font-size:clamp(72px,10vw,150px); line-height:.75; }
.section-heading>p { color:#aaa49b; line-height:1.7; max-width:420px; }
.program-list { margin-top:90px; border-top:1px solid #55514c; }
.program-card { padding:34px 0; border-bottom:1px solid #55514c; display:grid; grid-template-columns:8% 1fr 18% 50px; align-items:center; gap:20px; transition:.25s; }
.program-card:hover { padding-left:16px; background:rgba(255,69,33,.04); }
.program-no,.program-meta { color:#918c84; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.program-card h3 { font:600 clamp(31px,4vw,60px)/1 "Barlow Condensed"; text-transform:uppercase; margin:0; }
.program-card div p { display:none; color:#aaa49b; max-width:600px; line-height:1.6; }
.program-arrow { color:var(--orange); font-size:28px; }

.studio { background:var(--ivory); color:var(--black); display:grid; grid-template-columns:1.07fr .93fr; padding:0; min-height:780px; }
.studio-visual { background:#121212; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:700px; }
.studio-visual:before { content:""; position:absolute; inset:8%; border:1px solid #403e3a; }
.type-art { position:relative; z-index:2; color:var(--ivory); font:800 clamp(100px,13vw,210px)/.68 "Barlow Condensed"; text-align:center; letter-spacing:-.06em; transform:rotate(-5deg); }
.type-art em { color:var(--orange); font-family:"Cormorant Garamond"; }
.corner { position:absolute; width:22px; height:22px; border-color:var(--orange); z-index:3; }
.top-left{left:8%;top:8%;border-left:3px solid var(--orange);border-top:3px solid var(--orange)} .top-right{right:8%;top:8%;border-right:3px solid var(--orange);border-top:3px solid var(--orange)}
.bottom-left{left:8%;bottom:8%;border-left:3px solid var(--orange);border-bottom:3px solid var(--orange)} .bottom-right{right:8%;bottom:8%;border-right:3px solid var(--orange);border-bottom:3px solid var(--orange)}
.studio-copy { padding:clamp(70px,8vw,130px) 6vw; display:flex; flex-direction:column; justify-content:center; }
.eyebrow.dark { color:#58534d; }
.studio-copy h2 { font-size:clamp(64px,7vw,108px); line-height:.8; }
.studio-copy>p:not(.eyebrow) { color:#5e5953; line-height:1.8; max-width:540px; margin:45px 0; }
.studio-copy dl { border-top:1px solid #b9b3a9; }
.studio-copy dl div { display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid #b9b3a9; }
.studio-copy dt { color:#77716a; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.studio-copy dd { margin:0; font-size:13px; }
.text-link { color:var(--orange); margin-top:35px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:12px; }

.values-title { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-top:90px; }
.values-title>p { max-width:370px; color:#aaa49b; line-height:1.7; }
.value-grid { margin-top:90px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #4b4844; border-bottom:1px solid #4b4844; }
.value-grid article { min-height:280px; padding:28px; border-right:1px solid #4b4844; }
.value-grid article:last-child { border:0; }
.value-grid span { color:var(--orange); font-size:11px; }
.value-grid h3 { font:600 35px/1 "Barlow Condensed"; text-transform:uppercase; margin:80px 0 16px; }
.value-grid p { color:#9f9991; line-height:1.6; font-size:13px; }

.gallery { background:#111; }
.gallery-heading { display:flex; align-items:end; justify-content:space-between; }
.gallery-grid { display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:18px; margin-top:80px; }
.gallery-grid figure { margin:0; }
.gallery-main { grid-row:1/3; }
.gallery-photo { height:285px; background-image:linear-gradient(135deg,rgba(255,69,33,.18),transparent),var(--gallery-image); background-size:cover; filter:grayscale(1); transition:.4s; }
.gallery-main .gallery-photo { height:620px; background-position:center; }
.photo-two { background-position:70% 20%; }
.photo-three { background-position:90% 55%; }
.gallery-grid figure:hover .gallery-photo { filter:grayscale(.15); }
.gallery-grid figcaption { display:flex; justify-content:space-between; padding:12px 0; text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:#aaa49b; }
.gallery-grid figcaption span { color:var(--orange); }

.contact { min-height:820px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; position:relative; overflow:hidden; }
.contact:before { content:"FOX"; position:absolute; font:800 45vw/.7 "Barlow Condensed"; color:#0d0d0d; -webkit-text-stroke:1px #202020; z-index:-1; }
.contact h2 { font-size:clamp(80px,12vw,180px); line-height:.75; }
.contact-lead { color:#aaa49b; max-width:560px; line-height:1.7; margin:48px auto 32px; }
.button.large { min-width:250px; }
.contact-bottom { position:absolute; bottom:28px; left:4vw; right:4vw; border-top:1px solid #4b4844; padding-top:20px; display:flex; justify-content:space-between; color:#8f8a83; text-transform:uppercase; letter-spacing:.12em; font-size:9px; }

@media (min-width:1100px) {
  .header-cta { display:flex; align-items:center; gap:16px; }
  .program-card:hover div p { display:block; margin:12px 0 0; }
}
.menu-toggle { display:none; margin-left:auto; width:44px; height:44px; border:0; background:transparent; padding:11px; }
.menu-toggle span { display:block; height:1px; background:var(--ivory); margin:7px 0; transition:.2s; }
.site-header.is-scrolled { position:fixed; background:rgba(9,9,9,.92); backdrop-filter:blur(14px); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity:1; transform:none; }
.hero .reveal { opacity:1; transform:none; }
@media (max-width:800px) {
  .site-header { padding:0 20px; }
  .menu-toggle { display:block; position:relative; z-index:3; }
  .site-header nav { display:flex; position:fixed; inset:0; background:#090909; flex-direction:column; align-items:center; justify-content:center; gap:28px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:.25s; }
  .site-header nav.is-open { opacity:1; visibility:visible; transform:none; }
  .site-header nav a { font:600 42px/1 "Barlow Condensed"; text-transform:uppercase; }
  .menu-toggle[aria-expanded=true] span:first-child { transform:translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-4px) rotate(-45deg); }
  body.menu-open { overflow:hidden; }
  .hero { min-height:760px; }
  .hero-image { background-position:62% center; opacity:.68; }
  .hero-shade { background:linear-gradient(0deg,#080808 12%,rgba(8,8,8,.25) 75%,#080808 100%); }
  .hero-copy { left:20px; right:20px; width:auto; top:145px; }
  .hero h1 { font-size:clamp(66px,21vw,92px); }
  .hero-rail { display:none; }
  .scroll-cue { display:none; }
  .section { padding:80px 20px; }
  .about-copy { margin:65px 0 0; }
  .about-grid { grid-template-columns:1fr; margin:45px 0 0; }
  .statement { grid-template-columns:1fr; margin-top:70px; }
  .section-heading { grid-template-columns:1fr; }
  .program-list { margin-top:60px; }
  .program-card { grid-template-columns:36px 1fr 28px; }
  .program-meta { display:none; }
  .studio { grid-template-columns:1fr; }
  .studio-visual { min-height:520px; }
  .studio-copy { padding:80px 20px; }
  .values-title { display:block; }
  .value-grid { grid-template-columns:1fr 1fr; }
  .value-grid article:nth-child(2) { border-right:0; }
  .value-grid article { min-height:230px; }
  .gallery-heading { display:block; }
  .gallery-grid { grid-template-columns:1fr; grid-template-rows:auto; margin-top:55px; }
  .gallery-main { grid-row:auto; }
  .gallery-main .gallery-photo,.gallery-photo { height:420px; }
  .contact { min-height:760px; }
}
@media (max-width:480px) {
  .hero-actions,.contact-actions { display:grid; }
  .button { width:100%; }
  .value-grid { grid-template-columns:1fr; }
  .value-grid article { border-right:0; border-bottom:1px solid #4b4844; }
  .gallery-main .gallery-photo,.gallery-photo { height:330px; }
  .contact-bottom span:nth-child(2) { display:none; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.marquee div,.scroll-cue span{animation:none}*{transition:none!important} }