/* Omar Life Coach — paper, deep teal ink, sunrise apricot (from the logo) */
:root{
  --paper:#f5efe4; --paper-2:#ece4d5; --ink:#123432; --ink-2:#1d4b48; --teal:#3f8f90;
  --sun:#e0893a; --sun-deep:#c46f22; --muted:#5b625c; --line:#ddd3c1; --on-ink:#e9e2d4; --on-ink-muted:#a9b9b4;
  --serif:"Young Serif",Georgia,serif; --sans:"Schibsted Grotesk",system-ui,sans-serif;
  --gut:clamp(1rem,4vw,2.5rem); --sec:clamp(4.5rem,10vw,8.5rem); --r:18px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.075rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:1.45rem}
em{font-style:italic;color:var(--sun-deep)}
h1 em,h2 em{font-family:var(--serif);font-style:normal;color:var(--sun-deep)}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:1220px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.over{font:600 .76rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 1rem}
.lede{font-size:1.18rem;color:var(--muted);max-width:38rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.5rem;border-radius:999px;font:600 1rem/1 var(--sans);text-decoration:none;border:1.5px solid transparent;transition:transform .2s var(--ease),background .25s,color .25s,border-color .25s;cursor:pointer}
.btn:active{transform:scale(.97)}
.btn--sun{background:var(--sun);color:#1b1208}
.btn--sun:hover{background:var(--sun-deep);color:#fff}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--ink-2)}
.btn--line{border-color:currentColor;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.link{display:inline-block;margin-top:1.4rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--sun);padding-bottom:2px}
.link:hover{color:var(--sun-deep)}

/* notice + header */
.notice{display:flex;gap:.6rem;align-items:center;justify-content:center;background:var(--ink);color:var(--on-ink);text-decoration:none;font-size:.92rem;padding:.6rem var(--gut);text-align:center}
.notice u{white-space:nowrap;color:#fff;text-decoration-color:var(--sun);text-underline-offset:3px}
.notice__dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--sun);box-shadow:0 0 0 0 rgba(224,137,58,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(224,137,58,0)}100%{box-shadow:0 0 0 0 rgba(224,137,58,0)}}
.hdr{position:sticky;top:0;z-index:40;background:rgba(245,239,228,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.is-scrolled{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;gap:.7rem;align-items:center;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%;background:#fff;transform:scale(1)}
.brand b{display:block;font:400 1.5rem/1 var(--serif);letter-spacing:.06em}
.brand small{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.04em;margin-top:2px}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem;position:relative}
.nav a:not(.nav__call)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.nav__call{background:var(--ink);color:var(--paper);padding:.6rem 1.05rem;border-radius:999px;font-weight:600}
.menu{display:none}
@media (max-width:899px){
  .menu{display:grid;gap:6px;place-content:center;width:46px;height:46px;border:0;background:transparent;cursor:pointer}
  .menu span:not(.sr){display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
  .menu[aria-expanded=true] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .menu[aria-expanded=true] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
  .nav{position:fixed;inset:72px 0 auto;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);padding:.5rem var(--gut) 1.5rem;border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease);visibility:hidden}
  .nav.open{clip-path:inset(0);visibility:visible}
  .nav a{font:400 1.6rem/1 var(--serif);padding:.8rem 0;width:100%}
  .nav a::after{display:none}
  .nav__call{margin-top:.8rem;width:auto!important;font:600 1rem/1 var(--sans)!important;padding:1rem 1.3rem!important}
  .notice{font-size:.84rem;justify-content:flex-start;text-align:left}
}

/* hero */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,6rem);position:relative;overflow-x:clip}
.hero::before{content:"";position:absolute;right:-12vw;top:-8vw;width:min(70vw,820px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(224,137,58,.28),rgba(224,137,58,0) 65%);pointer-events:none}
.hero__grid{display:grid;gap:3rem;align-items:center;position:relative}
@media (min-width:900px){.hero__grid{grid-template-columns:1.15fr .85fr}}
.hero__h{font-size:clamp(2.8rem,7.4vw,6.2rem);line-height:.98;letter-spacing:-.025em}
.hero__h span{display:inline-block}
.hero__sub{font-size:clamp(1.15rem,1.8vw,1.35rem);max-width:32rem;margin:1.6rem 0 2rem;color:var(--ink-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__call{margin:1.4rem 0 0;color:var(--muted);font-size:.98rem}
.hero__call a{font-weight:600;color:var(--ink)}
.hero__img{margin:0;position:relative;justify-self:center;width:min(100%,460px)}
.hero__img img{border-radius:220px 220px var(--r) var(--r);aspect-ratio:4/5.2;object-fit:cover;object-position:50% 18%;width:100%;box-shadow:0 30px 60px -30px rgba(18,52,50,.45)}
.hero__img figcaption{position:absolute;left:-1rem;bottom:2rem;background:var(--paper);border:1px solid var(--line);padding:.55rem 1rem;border-radius:999px;font:400 1.05rem/1 var(--serif);box-shadow:0 12px 24px -16px rgba(0,0,0,.35)}
/* load-in */
.js .hero__over,.js .hero__h span,.js .hero__sub,.js .hero__cta,.js .hero__call,.js .phero__copy>*{opacity:0;transform:translateY(22px);animation:up .9s var(--ease) forwards}
.js .hero__h span:nth-child(2){animation-delay:.12s}
.js .hero__sub,.js .phero__copy>:nth-child(3){animation-delay:.24s}
.js .hero__cta,.js .phero__copy>:nth-child(4){animation-delay:.34s}
.js .hero__call{animation-delay:.42s}
.js .phero__copy>:nth-child(2){animation-delay:.1s}
.js .hero__img img,.js .phero__img img{clip-path:inset(100% 0 0 0 round 220px 220px 18px 18px);animation:unveil 1.2s .15s var(--ease) forwards}
.js .phero__img img{clip-path:inset(100% 0 0 0 round 18px);animation-name:unveil2}
.js .hero__img figcaption{opacity:0;animation:up .7s .9s var(--ease) forwards}
@keyframes up{to{opacity:1;transform:none}}
@keyframes unveil{to{clip-path:inset(0 0 0 0 round 220px 220px 18px 18px)}}
@keyframes unveil2{to{clip-path:inset(0 0 0 0 round 18px)}}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .reveal.in{opacity:1;transform:none}

/* sections */
.sec{padding:var(--sec) 0}
.shead{max-width:46rem;margin-bottom:clamp(2.2rem,5vw,3.5rem)}
.shead .lede{margin-top:1.2rem}

/* intro */
.intro{background:var(--paper-2);padding:var(--sec) 0}
.intro__grid{display:grid;gap:2.5rem}
@media (min-width:900px){.intro__grid{grid-template-columns:1fr 1.1fr;gap:5rem;align-items:start}}
.intro__quote{font:400 clamp(1.7rem,3.4vw,2.6rem)/1.2 var(--serif);margin:0;position:sticky;top:7rem}
.intro__body>p{font-size:1.15rem;margin-bottom:2rem}
.video{all:unset;display:block;position:relative;cursor:pointer;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--ink)}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .4s}
.video:hover img{transform:scale(1.04);opacity:.9}
.video__play{position:absolute;left:1.2rem;bottom:1.2rem;display:flex;gap:.5rem;align-items:center;background:var(--sun);color:#1b1208;font-weight:600;padding:.75rem 1.2rem .75rem .9rem;border-radius:999px;transition:transform .3s var(--ease)}
.video:hover .video__play{transform:scale(1.05)}
.video__play svg{width:22px;height:22px;fill:currentColor}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* connect */
.ccards{display:grid;gap:1.5rem}
@media (min-width:760px){.ccards{grid-template-columns:repeat(3,1fr)}.ccard:nth-child(2){margin-top:3rem}}
.ccard figure{margin:0 0 1.2rem;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.ccard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ccard:hover img{transform:scale(1.05)}
.ccard h3{margin-bottom:.5rem}
.ccard p{color:var(--muted)}
.register{margin-top:clamp(2.5rem,5vw,4rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;padding:1.6rem;border:1.5px dashed var(--sun);border-radius:var(--r);background:rgba(224,137,58,.07)}
.register p{margin:0;flex:1 1 20rem}
.register .link{margin:0}

/* coaching */
.sec--coach{background:var(--paper-2)}
.coach__grid{display:grid;gap:2rem}
@media (min-width:900px){.coach__grid{grid-template-columns:.9fr 1.1fr;gap:5rem}}
.sessions{list-style:none;margin:0;padding:0}
.sessions li{display:grid;grid-template-columns:3.2rem 1fr;column-gap:1rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.sessions li:last-child{border-bottom:1px solid var(--line)}
.sessions .num,.sess .num{font:400 1rem/1.9 var(--serif);color:var(--teal);grid-row:span 2}
.sessions h3{margin-bottom:.35rem}
.sessions p{margin:0;color:var(--muted)}

/* how I help (dark) */
.sec--help{background:var(--ink);color:var(--on-ink)}
.shead--light h2{color:#fff}
.shead--light .over{color:var(--sun)}
.sec--help h2 em{color:var(--sun);background:none}
.helps{display:grid;gap:1px;background:rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden}
@media (min-width:760px){.helps{grid-template-columns:repeat(3,1fr)}}
.help{background:var(--ink);padding:2rem 1.8rem 2.2rem;transition:background .4s}
.help:hover{background:var(--ink-2)}
.help h3{color:#fff;margin-bottom:.8rem}
.help h3::before{content:"";display:block;width:34px;height:34px;border-radius:50%;margin-bottom:1.4rem;background:conic-gradient(var(--sun) 0 25%,transparent 0);border:1.5px solid var(--sun);transition:transform .8s var(--ease)}
.help:nth-child(2) h3::before{background:conic-gradient(var(--sun) 0 60%,transparent 0)}
.help:nth-child(3) h3::before{background:var(--sun)}
.help:hover h3::before{transform:rotate(180deg)}
.help p{color:var(--on-ink-muted);margin:0}

/* story teaser */
.story{padding:var(--sec) 0}
.story__grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.story__grid{grid-template-columns:.85fr 1.15fr;gap:5rem}}
.story__img{margin:0}
.story__img img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;width:100%}
.story__copy h2{margin-bottom:1.4rem}
.story__copy p{color:var(--ink-2)}
.story__copy .btn{margin-top:.8rem}

/* gallery */
.sec--gallery{padding-top:0}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.gallery figure{margin:0;border-radius:14px;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery .g0{grid-column:span 2;aspect-ratio:16/9}
@media (min-width:760px){
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;grid-auto-rows:clamp(150px,17vw,230px)}
  .gallery .g0{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .gallery .g3{grid-row:span 2}
  .gallery .g5{grid-column:span 2}
}

/* contact */
.contact{background:var(--ink);color:var(--on-ink);padding:var(--sec) 0}
.contact h2{color:#fff}
.contact h2 em{color:var(--sun);background:none}
.contact .over{color:var(--sun)}
.contact .lede{color:var(--on-ink-muted);margin:1.2rem 0 2rem}
.contact__grid{display:grid;gap:3rem;align-items:center}
@media (min-width:900px){.contact__grid{grid-template-columns:1.1fr .9fr;gap:5rem}}
.contact__ways{display:grid;gap:.7rem;max-width:30rem}
.way{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-decoration:none;padding:1.05rem 1.3rem;border:1px solid rgba(255,255,255,.18);border-radius:14px;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.way span{color:var(--on-ink-muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.14em}
.way b{color:#fff;font-weight:600;overflow-wrap:anywhere;text-align:right}
.way:hover{background:rgba(255,255,255,.06);border-color:var(--sun);transform:translateX(4px)}
.contact__img{margin:0}
.contact__img img{border-radius:var(--r);aspect-ratio:1;object-fit:cover;width:100%}
.cform{display:grid;gap:1rem;background:var(--paper);color:var(--ink);padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--r)}
.cform label{display:grid;gap:.4rem;font-weight:600;font-size:.95rem}
.cform input,.cform select,.cform textarea{font:inherit;font-weight:400;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:16px}
.cform .hp{display:none}
.cform__msg{margin:0;font-size:.95rem}

/* page hero */
.phero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,5vw,4rem)}
.phero__grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.phero__grid{grid-template-columns:1.1fr .9fr;gap:4rem}}
.phero .hero__h{font-size:clamp(2.6rem,6.4vw,5.2rem)}
.phero .lede{margin:1.4rem 0 2rem}
.phero__img{margin:0}
.phero__img img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
.phero__img--tall img{aspect-ratio:4/5;object-position:50% 15%;max-height:640px}

/* features (connect page) */
.features{display:grid;gap:clamp(3.5rem,8vw,6.5rem)}
.feature{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.feature{grid-template-columns:1fr 1fr;gap:5rem}.feature--flip figure{order:2}}
.feature figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4}
.feature img{width:100%;height:100%;object-fit:cover}
.feature h2{margin-bottom:1.2rem}
.feature p:not(.over){color:var(--ink-2)}

/* faq */
.sec--faq{background:var(--paper-2)}
.faq__grid{display:grid;gap:1rem}
@media (min-width:900px){.faq__grid{grid-template-columns:.8fr 1.2fr;gap:4rem}}
.faq details{border-top:1px solid var(--line);padding:1.2rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:400 1.3rem/1.3 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sun-deep);font-family:var(--sans);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.8rem 0 0;color:var(--muted)}

/* coaching page sessions */
.sess__list{display:grid;gap:0;max-width:62rem}
.sess{display:grid;grid-template-columns:3.5rem 1fr;gap:1rem;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line)}
.sess h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.6rem}
.sess__s{font-size:1.15rem;color:var(--teal);font-weight:500}
.sess p:last-child{color:var(--ink-2);max-width:44rem}

/* essay (about) */
.essay{max-width:44rem}
.essay>p{font-size:1.16rem;line-height:1.75;color:var(--ink-2)}
.essay>p:first-child::first-letter{font:400 4.2rem/.8 var(--serif);float:left;margin:.35rem .6rem 0 0;color:var(--sun-deep)}
.beat{font:400 clamp(2rem,5vw,3.2rem)/1.1 var(--serif)!important;color:var(--ink)!important;margin:2.8rem 0 1.6rem}
.beat::before{content:"";display:block;width:2.5rem;height:2px;background:var(--sun);margin-bottom:1.1rem}
.loss{font:600 clamp(1rem,1.6vw,1.15rem)/1 var(--sans)!important;letter-spacing:.4em;text-transform:uppercase;color:var(--teal)!important;margin:3rem 0 1.4rem}
.resil{margin:3rem 0;padding:clamp(1.8rem,4vw,3rem);background:var(--ink);color:#fff;border-radius:var(--r)}
.resil__w{font:400 clamp(2.6rem,8vw,5rem)/1 var(--serif);margin:0 0 .5rem;color:var(--sun)}
.resil__d{margin:0;font-size:1.2rem;color:var(--on-ink)}
.pull{margin:2.6rem 0;font:400 clamp(1.5rem,3vw,2.1rem)/1.25 var(--serif);color:var(--ink);padding:0}
.pull::before{content:"“";display:block;font-size:4rem;line-height:.6;color:var(--sun)}
.story__pair{display:grid;gap:1.2rem}
@media (min-width:760px){.story__pair{grid-template-columns:.8fr 1.2fr;align-items:end}}
.story__pair figure{margin:0}
.story__pair img{border-radius:var(--r);width:100%;object-fit:cover}
.story__pair figcaption{margin-top:.7rem;color:var(--muted);font-size:.95rem}
.simple{min-height:50vh}
.simple .hero__h{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:1.5rem}

/* footer */
.ftr{background:var(--paper-2);padding:4.5rem 0 2rem;font-size:.98rem}
.ftr__grid{display:grid;gap:2rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ftr__brand{grid-column:1/-1}
@media (min-width:900px){.ftr__brand{grid-column:auto}}
.ftr__brand img{width:130px;border-radius:14px;mix-blend-mode:multiply;margin-bottom:.8rem}
.ftr__brand p{font:400 1.15rem/1.35 var(--serif);max-width:20rem}
.ftr h3{font:600 .76rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.ftr a{display:block;text-decoration:none;padding:.25rem 0;overflow-wrap:anywhere}
.ftr a:hover{color:var(--sun-deep)}
.ftr__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
.ftr__base a{display:inline;padding:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .hero__h span,.js .hero__over,.js .hero__sub,.js .hero__cta,.js .hero__call,.js .phero__copy>*,.js .hero__img figcaption{opacity:1;transform:none}
  .js .hero__img img,.js .phero__img img{clip-path:none}
}
.nav .lang{font-size:.9rem;font-weight:600;color:var(--teal);border:1.5px solid var(--line);border-radius:999px;padding:.35rem .8rem}
.nav .lang::after{display:none}
.nav .lang:hover{border-color:var(--teal)}
@media (max-width:899px){.nav .lang{font:600 1rem/1 var(--sans);width:auto;padding:.7rem 1rem;margin-top:.6rem}}