/* =========================================================================
   CROWN HR — bespoke case-study theme
   Corporate, clean, trustworthy. Warm gray + orange.
   The three-people-linked-by-a-chain mark. Restrained on purpose.
   Scoped under body.hr.
   ========================================================================= */
@font-face{font-family:"HN Crown";src:local("Helvetica Neue"),local("HelveticaNeue"),url("../assets/fonts/HelveticaNeue.ttc");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"HN Crown";src:local("Helvetica Neue Medium"),local("HelveticaNeue-Medium"),url("../assets/fonts/HelveticaNeue.ttc");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"HN Crown";src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),url("../assets/fonts/HelveticaNeue.ttc");font-weight:600 900;font-style:normal;font-display:swap;}
.hr{
  --sans:"HN Crown","Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --orange:#F8982B;
  --orange-deep:#E07E12;
  --gray:#808181;
  --ink:#3A3A3C;
  --ink-2:#5C5C5E;
  --paper:#F5F5F2;
  --white:#FFFFFF;
  --line:#E2E2DE;
  --line-2:#ECECE8;

  --hr-mega: clamp(2.8rem, 8.5vw, 8rem);
  --hr-huge: clamp(2.2rem, 5.2vw, 4.8rem);
  --hr-big:  clamp(1.7rem, 3.4vw, 3rem);

  background:var(--paper);
  color:var(--ink);
  cursor:auto;
}
.hr ::selection{ background:var(--orange); color:var(--white); }

.hr-display{ font-family:var(--sans); font-weight:800; line-height:0.98; letter-spacing:-0.03em; text-wrap:balance; }
.hr-mono{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; }

/* ---------- shared-chrome retheme (light, restrained) ---------- */
.hr .exp-grain{ display:none !important; }
.hr .exp-progress{ background:var(--orange); height:3px; }
.hr .exp-veil{ background:var(--ink); color:var(--orange); }
.hr .exp-ambient{ display:none; }
.hr .nav::before{ opacity:1 !important; background:color-mix(in srgb,var(--paper) 88%, transparent); border-bottom-color:var(--line); }

.hr-section{ padding-block:clamp(3.8rem,8vw,7.5rem); position:relative; }
.hr .wrap{ position:relative; z-index:2; }

/* =====================================================================
   HERO
   ===================================================================== */
.hr-hero{ background:var(--white); border-bottom:1px solid var(--line); position:relative; overflow:hidden; padding-top:clamp(7rem,13vh,10rem); }
.hr-hero__inner{ padding-inline:var(--mx); max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-bottom:clamp(3rem,6vw,5rem); }
@media (max-width:860px){ .hr-hero__inner{ grid-template-columns:1fr; } }
.hr-hero__eyebrow{ display:inline-flex; align-items:center; gap:0.7em; font-family:var(--mono); font-size:clamp(0.7rem,1vw,0.8rem); letter-spacing:0.2em; text-transform:uppercase; color:var(--orange); }
.hr-hero__eyebrow::before{ content:""; width:clamp(20px,4vw,42px); height:2px; background:currentColor; }
.hr-hero__title{ font-family:var(--sans); font-weight:800; font-size:var(--hr-mega); line-height:0.92; letter-spacing:-0.035em; margin-top:0.35em; color:var(--ink); }
.hr-hero__title em{ font-style:normal; color:var(--orange); }
.hr-hero__tag{ font-family:var(--sans); font-weight:500; font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.45; color:var(--ink-2); max-width:36ch; margin-top:1.3rem; }
.hr-hero__cta{ display:inline-flex; gap:0.8rem; flex-wrap:wrap; margin-top:1.8rem; }
.hr-hero__art{ display:flex; justify-content:center; }
.hr-hero__art img{ width:min(82%,420px); height:auto; will-change:transform; }
.hr.hr-motion .hr-hero__art img{ animation: hr-float 5s ease-in-out infinite; }
@keyframes hr-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.hr-btn{ display:inline-flex; align-items:center; gap:0.5em; white-space:nowrap; font-family:var(--sans); font-weight:700; font-size:0.86rem; letter-spacing:0.01em; padding:0.9em 1.5em; border-radius:6px; background:var(--orange); color:var(--white); border:1px solid var(--orange); transition:transform 0.2s var(--ease), background 0.3s; }
.hr-btn:hover{ transform:translateY(-2px); background:var(--orange-deep); border-color:var(--orange-deep); }
.hr-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.hr-btn--ghost:hover{ background:var(--paper); border-color:var(--gray); }

/* =====================================================================
   MARQUEE (subtle, department names)
   ===================================================================== */
.hr-marquee{ overflow:hidden; display:flex; background:var(--ink); color:var(--white); padding-block:clamp(0.7rem,1.3vw,1rem); }
.hr-marquee__track{ display:flex; flex:none; align-items:center; white-space:nowrap; }
.hr.hr-motion .hr-marquee__track{ animation: hr-scroll 40s linear infinite; }
.hr-marquee:hover .hr-marquee__track{ animation-play-state:paused; }
@keyframes hr-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hr-mq{ display:inline-flex; align-items:center; gap:0.8em; font-family:var(--sans); font-weight:600; font-size:clamp(0.92rem,1.5vw,1.2rem); letter-spacing:0.01em; padding:0 0.9em; }
.hr-mq .dot{ width:0.42em; height:0.42em; border-radius:50%; background:var(--orange); flex:none; }

/* =====================================================================
   EYEBROW / STATEMENT
   ===================================================================== */
.hr-eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.hr-eyebrow .t{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--orange); white-space:nowrap; }
.hr-eyebrow .ln{ flex:1; height:1px; background:var(--line); }
.hr-eyebrow .n{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--gray); }
.hr-statement{ font-family:var(--sans); font-weight:800; font-size:var(--hr-huge); line-height:1.0; letter-spacing:-0.03em; text-wrap:balance; color:var(--ink); }
.hr-statement em{ font-style:normal; color:var(--orange); }
.hr-lead{ font-family:var(--sans); font-weight:400; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.55; color:var(--ink-2); max-width:52ch; }
.hr-lead em{ font-style:normal; color:var(--ink); font-weight:600; }

/* trio */
.hr-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
@media (max-width:820px){ .hr-trio{ grid-template-columns:1fr; } }
.hr-cell{ border-top:2px solid var(--ink); padding-top:1.3rem; }
.hr-cell .lab{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange); }
.hr-cell h3{ font-family:var(--sans); font-weight:800; font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.05; letter-spacing:-0.02em; margin:0.7rem 0 0.6rem; color:var(--ink); }
.hr-cell p{ font-family:var(--sans); font-weight:400; font-size:0.96rem; line-height:1.5; color:var(--ink-2); max-width:32ch; }

/* =====================================================================
   THE MARK
   ===================================================================== */
.hr-mark{ background:var(--white); border-block:1px solid var(--line); }
.hr-mark__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width:820px){ .hr-mark__grid{ grid-template-columns:1fr; text-align:center; } }
.hr-mark__art{ display:flex; justify-content:center; }
.hr-mark__art img{ width:min(78%,320px); height:auto; }
.hr.hr-motion .hr-mark__art img{ animation: hr-float 6s ease-in-out infinite; }
.hr-mark__h{ font-family:var(--sans); font-weight:800; font-size:var(--hr-big); line-height:1.0; letter-spacing:-0.025em; color:var(--ink); }
.hr-mark__h em{ font-style:normal; color:var(--orange); }
.hr-mark__p{ font-family:var(--sans); font-weight:400; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.55; color:var(--ink-2); max-width:40ch; margin-top:1rem; }
@media (max-width:820px){ .hr-mark__p{ margin-inline:auto; } }

/* =====================================================================
   SUB-BRANDS
   ===================================================================== */
.hr-subs{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(0.8rem,1.6vw,1.2rem); }
@media (max-width:620px){ .hr-subs{ grid-template-columns:1fr; } }
.hr-sub{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:clamp(1.3rem,2.4vw,1.9rem); display:flex; align-items:center; gap:clamp(1rem,2vw,1.6rem); transition:transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease; }
.hr-sub:hover{ transform:translateY(-3px); border-color:var(--orange); box-shadow:0 14px 30px -18px rgba(58,58,60,0.35); }
.hr-sub img{ width:clamp(72px,9vw,108px); height:auto; flex:none; }
.hr-sub__txt .d{ font-family:var(--sans); font-weight:800; font-size:clamp(1rem,1.5vw,1.3rem); letter-spacing:-0.01em; color:var(--orange); line-height:1.05; }
.hr-sub__txt .s{ font-family:var(--sans); font-weight:400; font-size:0.86rem; color:var(--ink-2); margin-top:0.35rem; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.hr-gal{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,1.8vw,1.6rem); }
.hr-frame{ position:relative; border-radius:10px; overflow:hidden; background:var(--white); border:1px solid var(--line); }
.hr-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.8s var(--ease); }
.hr-frame:hover img{ transform:scale(1.04); }
.hr-frame__cap{ position:absolute; left:0.85rem; bottom:0.85rem; z-index:2; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--white); background:rgba(58,58,60,0.82); backdrop-filter:blur(6px); border-radius:100px; padding:0.4em 0.8em; }
.hr-sp-7{ grid-column:span 7; } .hr-sp-5{ grid-column:span 5; }
.hr-sp-6{ grid-column:span 6; } .hr-sp-12{ grid-column:span 12; }
.hr-ar-32{ aspect-ratio:3/2; } .hr-ar-43{ aspect-ratio:4/3; } .hr-ar-219{ aspect-ratio:21/9; }
.hr-frame--pad{ display:flex; align-items:center; justify-content:center; padding:clamp(1.4rem,3vw,2.6rem); }
.hr-frame--pad img{ width:100%; height:auto; object-fit:contain; }
@media (max-width:760px){ .hr-gal > *{ grid-column:1 / -1 !important; } }

/* =====================================================================
   FINALE
   ===================================================================== */
.hr-finale{ background:var(--ink); color:var(--white); text-align:center; }
.hr-finale__mark{ width:clamp(72px,10vw,120px); height:auto; margin:0 auto clamp(1.6rem,3vw,2.4rem); display:block; }
.hr-finale .hr-display{ font-size:var(--hr-huge); }
.hr-finale .hr-display em{ font-style:normal; color:var(--orange); }
.hr-finale__cta{ margin-top:clamp(2rem,4vw,3rem); display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* next project */
.hr .nextproj{ border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5rem); }
.hr .nextproj .label{ display:block; margin-bottom:0.8rem; color:var(--orange); }
.hr .nextproj .big{ font-family:var(--sans); font-weight:800; font-size:var(--hr-big); line-height:1.0; letter-spacing:-0.025em; color:var(--ink); display:inline-flex; align-items:center; gap:0.4em; }
.hr .nextproj a:hover .big{ color:var(--orange); opacity:1; }
.hr .nextproj a:hover .big .arr{ transform:translateX(10px); }
.hr .nextproj .big .arr{ transition:transform 0.4s var(--ease); }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .hr [data-pop]{ opacity:0; transform:translateY(28px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay:var(--d,0ms); }
  .hr [data-pop].is-in{ opacity:1; transform:none; }
}
@media (max-width:600px){ .hr{ --hr-mega:clamp(2.6rem,11vw,4rem); --hr-huge:clamp(2rem,8vw,3rem); } }