/* ==========================================================================
   HOMEPOINT – v2 art direction: "Point of light"
   Concept: architecture is read through light and shadow; the brand's "point"
   is the one warm accent (kiln) that marks where to look / what to do.

   Type (demo stand-ins, all OFL, self-hosted in /fonts):
     display  → Noto Sans Hebrew ExtraLight/Light – stand-in for Canela
     ui       → Noto Sans Hebrew                   – stand-in for Graphik
   To swap in licensed Canela / Graphik: add the @font-face files and change
   --f-display / --f-ui below. Nothing else references font names.
   ========================================================================== */


@font-face{font-family:"HP Display";src:url(../fonts/sans-he.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"HP Display";src:url(../fonts/sans-la.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"HP UI";src:url(../fonts/sans-he.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"HP UI";src:url(../fonts/sans-la.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"HP Hero";src:url(../fonts/plex-he-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"HP Hero";src:url(../fonts/plex-la-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* animatable progress value for the hero photo reveal */
@property --rv{syntax:"<number>";inherits:true;initial-value:1}

:root{
  --bone:#EFEADF;
  --bone-2:#E4DED0;
  --stone:#C9C2B2;
  --basalt:#11120E;
  --basalt-2:#1A1B16;
  --kiln:#E2561D;          /* accent on dark + graphic use */
  --kiln-ink:#B33F0F;      /* accent for small text on bone (AA) */

  --ink-70:rgba(17,18,14,.72);
  --ink-18:rgba(17,18,14,.18);
  --bone-72:rgba(239,234,223,.74);
  --bone-18:rgba(239,234,223,.18);

  --f-display:"HP Display","Noto Sans Hebrew","Heebo",system-ui,sans-serif;
  --f-hero:"HP Hero","IBM Plex Sans Hebrew","Heebo",system-ui,sans-serif;  /* hero headline only */
  --f-ui:"HP UI","Noto Sans Hebrew","Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --gutter:clamp(1.25rem,3.6vw,3.5rem);
  --max:92rem;
  --header-h:4.25rem;
  --ease:cubic-bezier(.22,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--basalt);font-family:var(--f-ui);font-weight:300;font-size:1.0625rem;line-height:1.7;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{font-weight:inherit}
:focus-visible{outline:2px solid var(--kiln);outline-offset:3px}
::selection{background:var(--kiln);color:var(--basalt)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:.5rem;inset-inline-start:.5rem;z-index:100;background:var(--basalt);color:var(--bone);padding:.6rem 1rem;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
.display{font-family:var(--f-display);font-weight:300;line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.label{font-size:.75rem;font-weight:400;letter-spacing:.16em;color:var(--kiln-ink);display:flex;align-items:center;gap:.7rem}
.on-dark .label,.label--dark{color:var(--kiln)}
.label__pt{width:.45rem;height:.45rem;background:var(--kiln);border-radius:50%;flex:none}

/* ---------- logotype ---------- */
.logo{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-ui);font-weight:500;font-size:.95rem;letter-spacing:.34em;text-decoration:none;direction:ltr;line-height:1;color:inherit}
.logo i{width:.42em;height:.42em;border-radius:50%;background:var(--kiln);display:block;flex:none;transition:transform .5s var(--ease)}
.logo:hover i{transform:scale(1.6)}
.logo--lg{font-size:clamp(1.6rem,4.6vw,4.2rem);font-weight:300;letter-spacing:.3em}

/* ---------- buttons ---------- */
.cta{--bg:var(--basalt);--fg:var(--bone);padding:0;position:relative;display:inline-flex;align-items:stretch;min-height:3.5rem;text-decoration:none;background:var(--bg);color:var(--fg);font-weight:400;font-size:1rem;border:0;cursor:pointer;overflow:hidden;isolation:isolate}
.cta__txt{padding:.85rem 1.5rem;display:flex;align-items:center;transition:color .4s var(--ease)}
/* the orange "point" is a background layer that grows from the arrow slot; the slot itself never moves or leaves the flow */
.cta::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:3.5rem;background:var(--kiln);z-index:-1;transition:width .5s var(--ease)}
.cta__pt{display:grid;place-items:center;width:3.5rem;flex:none;color:var(--basalt)}
.cta__pt svg{width:1.4rem;height:.7rem;transition:transform .5s var(--ease)}
.cta:focus-visible::before{width:100%}
.cta:focus-visible .cta__txt{color:var(--basalt)}
.cta:focus-visible .cta__pt svg{transform:translateX(-.3rem)}
.cta:active::before{width:100%}
.cta:active .cta__txt{color:var(--basalt)}
@media (hover:hover){
  .cta:hover::before{width:100%}
  .cta:hover .cta__txt{color:var(--basalt)}
  .cta:hover .cta__pt svg{transform:translateX(-.3rem)}
}
.cta--bone{--bg:var(--bone);--fg:var(--basalt)}
.cta[disabled]{cursor:progress;opacity:.7}
.cta--block{width:100%;justify-content:space-between}
.link{display:inline-block;text-decoration:none;padding-block:.4rem;background:linear-gradient(currentColor,currentColor) 100% 100%/100% 1px no-repeat;transition:background-size .45s var(--ease),color .3s}
.link:hover{background-size:0 1px;background-position:0 100%}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h);background:transparent;color:var(--basalt);transition:transform .5s var(--ease),background-color .3s,box-shadow .3s}
.site-header.is-solid{background:var(--bone);box-shadow:0 1px 0 var(--ink-18)}
.site-header.is-hidden:not(.menu-open){transform:translateY(-101%)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.nav{display:flex;align-items:center;gap:2.75rem}
.nav ul{display:flex;gap:2.25rem}
.nav ul a{position:relative;font-size:.9375rem;font-weight:400;text-decoration:none;padding-block:.5rem;color:var(--ink-70);transition:color .3s}
.nav ul a::after{content:"";position:absolute;inset-inline:0;bottom:.1rem;height:1px;background:var(--kiln);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.nav ul a:hover,.nav ul a[aria-current="true"]{color:var(--basalt)}
.nav ul a:hover::after,.nav ul a[aria-current="true"]::after{transform:scaleX(1)}
.nav-cta{display:inline-flex;align-items:center;gap:.7rem;min-height:2.6rem;padding:.4rem 1.1rem;border:1px solid var(--basalt);text-decoration:none;font-size:.9375rem;font-weight:400;transition:background-color .35s var(--ease),color .35s var(--ease)}
.nav-cta::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--kiln)}
.nav-cta:hover{background:var(--basalt);color:var(--bone)}
.menu-toggle{display:none;align-items:center;gap:.75rem;background:none;border:0;cursor:pointer;padding:.5rem 0;font-size:.9375rem;font-weight:400}
.menu-toggle__bars{display:grid;gap:.4rem;width:1.6rem}
.menu-toggle__bars i{display:block;height:1px;background:currentColor;transition:transform .35s var(--ease)}
.menu-open .menu-toggle__bars i:first-child{transform:translateY(.23rem) rotate(20deg)}
.menu-open .menu-toggle__bars i:last-child{transform:translateY(-.23rem) rotate(-20deg)}
.progress{position:absolute;inset-inline:0;bottom:0;height:2px;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--kiln);transform-origin:100% 50%;transform:scaleX(var(--scroll,0))}

/* ==========================================================================
   HERO – two zones: a text zone (right) and a photograph (left).
   The headline is sized from the text zone's own width (container query
   units), so it can never cross into the photo. One interaction only: the
   photo's crop eases slightly as the page scrolls (--p, set in main.js).
   ========================================================================== */
.hero{background:var(--bone);color:var(--basalt)}
.hero__stage{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);min-height:100vh;min-height:100svh;max-height:68rem;padding-top:var(--header-h);animation:rv 1.4s var(--ease-io) .1s both}
@keyframes rv{from{--rv:0}to{--rv:1}}

.hero__text{container-type:inline-size;display:flex;flex-direction:column;padding-block:clamp(1.5rem,4vh,3rem) clamp(2.5rem,7vh,5rem);padding-inline-end:clamp(2rem,4vw,4.5rem)}
.hero__text{padding-inline-start:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
.hero__eyebrow{margin:0;animation:fade .9s var(--ease) .2s both}
.hero__main{margin-block:auto;padding-top:clamp(2rem,5vh,4rem)}

.hero__title{font-family:var(--f-hero);font-weight:400;font-size:clamp(2.6rem,15cqi,9.5rem);line-height:1.02;letter-spacing:-.025em;margin-bottom:clamp(1.75rem,4.2vh,2.75rem);white-space:nowrap}
.hero__line{display:block;overflow:hidden;padding-block:.06em .14em;margin-block:-.06em -.14em}
.hero__line--2{padding-inline-start:.22em}
.hero__word{display:inline-block;animation:word 1s var(--ease) both;animation-delay:calc(.35s + var(--i) * .1s)}
@keyframes word{from{transform:translateY(106%)}to{transform:none}}

.hero__lead{max-width:27rem;font-size:clamp(1.0625rem,1.2vw,1.25rem);line-height:1.65;color:var(--ink-70);margin-bottom:clamp(1.75rem,4vh,2.5rem);animation:fade .9s var(--ease) 1s both}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;animation:fade .9s var(--ease) 1.15s both}
@keyframes fade{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}

.hero__photo{position:relative;margin:0;overflow:hidden;background:var(--bone-2);clip-path:inset(calc((1 - var(--rv)) * 100%) 0 0 0)}
.hero__img{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover;object-position:28% 62%;filter:sepia(.1) saturate(1.04);transform:translate3d(0,calc(var(--p,0) * 5%),0) scale(calc(1.05 - var(--p,0) * .045));will-change:transform}

@media (max-width:62rem){
  .menu-toggle{display:inline-flex}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:1.5rem;background:var(--bone);padding:1.25rem var(--gutter) 2rem;box-shadow:0 1px 0 var(--ink-18);visibility:hidden;opacity:0;transform:translateY(-.5rem);transition:opacity .3s,transform .4s var(--ease),visibility 0s .3s}
  .menu-open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .3s,transform .4s var(--ease)}
  .menu-open.site-header{background:var(--bone)}
  .nav ul{flex-direction:column;gap:0}
  .nav ul a{display:block;font-family:var(--f-display);font-weight:300;font-size:1.9rem;padding-block:.55rem;color:var(--basalt)}
  .nav ul a::after{display:none}
  .nav-cta{justify-content:center;min-height:3.25rem}

  /* mobile: text first, photograph below */
  .hero__stage{grid-template-columns:minmax(0,1fr);max-height:none;min-height:0}
  .hero__text{padding:1.5rem var(--gutter) 2.25rem}
  .hero__main{margin-block:0;padding-top:2.25rem}
  .hero__title{font-size:clamp(2.4rem,15.2cqi,6.2rem)}
  .hero__photo{aspect-ratio:5/4}
  .hero__img{object-position:20% 60%}
  .hero__actions .cta{width:100%;justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .hero__img{transform:none}

}