/* UP2U Recruitment Agency - one-page site. Plain CSS, no frameworks, no external requests. */
:root{
  --cream:#f4e5da;
  --orange:#ff4a22;        /* brand orange: backgrounds, borders, torn edges */
  --orange-head:#d9360f;   /* orange for large headings on cream (>= 3:1) */
  --orange-ink:#c02a08;    /* orange for small text on cream (>= 4.5:1) */
  --ink:#1f1a17;
  --yellow:#f5b320;
  --btn-ink:#3b3b3b;
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  --edge:clamp(26px,3.6vw,48px);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 clamp(1rem,.93rem + .38vw,1.2rem)/1.6 var(--font);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
main{overflow-x:clip}

/* headings */
.h2{margin:0 0 clamp(24px,4vw,48px);font-size:clamp(1.75rem,1.2rem + 2.3vw,2.75rem);line-height:1.25;font-weight:500;color:var(--orange-head)}
.h2--bold{font-weight:700}
.h2--light{color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.6rem 2rem;border-radius:999px;font-weight:600;font-size:clamp(1.05rem,.95rem + .6vw,1.5rem);line-height:1.2;text-align:center;text-decoration:none;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn--sm{min-height:44px;padding:.35rem 1.25rem;font-size:1rem}
.btn--cream{background:var(--cream);color:#8f1f04}
.btn--yellow{background:var(--yellow);color:var(--btn-ink)}

/* sections + torn paper edges (the strips hang outside the section box) */
.sec{position:relative}
.sec--orange,.sec--photo,.hero{position:relative;z-index:1}
.sec--orange{background:var(--orange)}
.sec--orange::before,.sec--orange::after,.sec--photo::before,.sec--photo::after,.hero::after{
  content:"";position:absolute;left:0;right:0;height:var(--edge);background-repeat:no-repeat;background-size:cover;pointer-events:none;z-index:3}
.sec--orange::before,.sec--photo::before{bottom:calc(100% - 1px);background-image:url(../img/edge-top.svg);background-position:center top}
.sec--orange::after,.sec--photo::after,.hero::after{top:calc(100% - 1px);background-image:url(../img/edge-bottom.svg);background-position:center bottom}
.no-bottom::after{display:none}

/* ------------------------------------------------------------ hero */
.hero{background:var(--orange);color:var(--cream);min-height:clamp(640px,150vw,760px);isolation:isolate}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 0;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,10,5,.55) 0,rgba(20,10,5,.5) 45%,rgba(20,10,5,.78) 100%)}
.hero__inner{position:relative;display:flex;flex-direction:column;min-height:inherit;padding-top:clamp(12px,2.6vw,36px);padding-bottom:calc(var(--edge) + 36px)}
.hero__bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo img{width:clamp(56px,7vw,100px);height:auto}
.hero__title{margin:auto 0 0;max-width:13em;font-size:clamp(1.75rem,1rem + 3.4vw,3rem);line-height:1.3;font-weight:600;color:var(--cream);text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero__polaroids{position:absolute;top:clamp(64px,10vw,96px);right:0;width:clamp(210px,62vw,300px);aspect-ratio:1/1.15}
.pol{position:absolute;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
.pol--a{top:0;left:0;width:66%}
.pol--b{top:34%;right:0;width:64%}

/* ------------------------------------------------------------ numbered points */
.num{display:inline-block;flex:none;padding:.05em .8em;border-radius:999px;background:var(--orange);color:#fff;font-weight:700;font-size:1.2rem;line-height:1.5;letter-spacing:.02em;white-space:nowrap}
.points{display:grid;gap:clamp(20px,3vw,36px) clamp(28px,6vw,80px)}
.points p{font-size:clamp(1.0625rem,.95rem + .5vw,1.3rem);line-height:1.5}
.point--row{display:flex;gap:20px;align-items:flex-start}
.point--row .num{margin-top:.2em}
.point--stack{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.points--onorange .num{background:var(--cream);color:var(--orange-ink)}

/* ------------------------------------------------------------ who it is for */
.forwhom{padding:clamp(48px,8vw,100px) 0 clamp(120px,14vw,200px);overflow:hidden}
.forwhom__map{position:absolute;top:0;right:0;width:min(78%,700px);height:auto;z-index:0;pointer-events:none}
.forwhom .wrap{position:relative;z-index:1}

/* chats band */
.chats{display:flow-root;padding:0 0 clamp(36px,5vw,64px)}
.chats__grid{display:grid;gap:clamp(20px,3vw,40px);margin-top:calc(-1 * clamp(110px,14vw,200px));position:relative;z-index:4}
.chats__grid img{width:100%;max-width:420px;margin-inline:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}

/* ------------------------------------------------------------ strengths */
.strengths{padding:clamp(56px,8vw,100px) 0 clamp(48px,7vw,90px)}

/* ------------------------------------------------------------ why choose us */
.why{position:relative;padding-top:clamp(20px,3vw,40px)}
.why__collage{position:relative;aspect-ratio:1200/300;width:min(100%,1600px);margin:0 auto calc(-1 * var(--edge) * .9)}
.why__collage img{position:absolute;height:auto;z-index:4}
.why__collage .c-pano{left:0;right:0;bottom:0;width:100%;z-index:auto}
.c-girl{left:6%;bottom:6%;width:21%}
.c-bag{left:0;bottom:-2%;width:15%}
.c-kids{left:33%;bottom:2%;width:31%}
.c-couple{left:58%;bottom:0;width:28%}
.c-box{right:1%;bottom:-8%;width:20%}
.why__panel{padding:clamp(40px,6vw,80px) 0 clamp(40px,5vw,70px);overflow:visible}
.why__map{position:absolute;left:0;top:0;width:min(70%,820px);height:auto;pointer-events:none}
.why__text{position:relative}
.why__cols{display:grid;gap:0 clamp(28px,6vw,80px)}
.why__cols p{margin-bottom:1.1em;font-size:clamp(1.0625rem,.95rem + .5vw,1.3rem);line-height:1.5}
.why__group{width:min(100%,540px);margin:clamp(12px,3vw,28px) 0 calc(-1 * clamp(40px,5vw,70px)) auto}

/* ------------------------------------------------------------ problem cards */
.problems{padding:clamp(56px,8vw,100px) 0 clamp(40px,6vw,80px)}
.cards{display:grid;gap:clamp(28px,4vw,52px)}
.card{position:relative}
.card__box{position:relative;z-index:1;padding:clamp(22px,3.2vw,40px) clamp(22px,4vw,52px);border:1.5px solid var(--orange);border-radius:clamp(28px,4vw,44px);background:var(--cream)}
.card__box h3{margin:0 0 .6em;font-size:clamp(1.2rem,1.02rem + .9vw,1.65rem);line-height:1.3;font-weight:700;color:var(--orange-head)}
.card__box p{font-size:clamp(1rem,.93rem + .35vw,1.15rem);line-height:1.6}
.card__box p+p{margin-top:1em}
.card__img{position:relative;z-index:2;height:auto;margin:-22px auto 0}
.card__img--books{width:clamp(130px,34%,210px)}
.card__img--temple{width:clamp(170px,44%,290px)}
.card__img--notebook{width:clamp(150px,38%,250px)}
.card__img--racket{width:clamp(130px,30%,200px)}
.card__img--bells{width:clamp(96px,22%,140px);margin:-30px 4% 0 auto}

/* photo section behind the second set of cards */
.sec--photo{background:#3a2e27 center top/cover no-repeat}
.cardsphoto{background-image:url(../img/photo-cards.webp);padding:clamp(40px,6vw,80px) 0}

/* ------------------------------------------------------------ compare with other agencies */
.compare{padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px);overflow:visible}
.compare__media{position:relative;aspect-ratio:1/.8;width:min(100%,620px);margin:clamp(16px,3vw,32px) 0 0 auto}
.compare__media img{position:absolute;height:auto}
.m-mount{right:-8%;bottom:-6%;width:80%}
.m-b{left:0;bottom:8%;width:56%;z-index:2}
.m-a{right:2%;top:0;width:52%;z-index:1}

/* ------------------------------------------------------------ about */
.about{padding:clamp(56px,8vw,100px) 0 clamp(48px,7vw,90px)}
.about__grid{display:grid;gap:clamp(20px,4vw,48px) clamp(24px,5vw,64px)}
.about__text p{margin-bottom:1.1em;font-size:clamp(1.0625rem,.95rem + .5vw,1.3rem);line-height:1.55}
.about__photo{width:min(100%,420px);margin-inline:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
.facts{display:grid;align-items:start;gap:clamp(16px,2.4vw,24px) clamp(20px,5vw,60px);margin-top:clamp(8px,2vw,24px)}
.facts li{padding:clamp(18px,2.4vw,28px) clamp(24px,4vw,48px);border:1px solid var(--orange);border-radius:999px;color:var(--orange-ink);font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);line-height:1.4;text-align:center;font-weight:500}
.facts li:nth-child(1){transform:rotate(-2.5deg)}
.facts li:nth-child(2){transform:rotate(3deg)}
.facts li:nth-child(3){transform:rotate(-3.5deg)}
.facts li:nth-child(4){transform:rotate(-2deg)}

/* ------------------------------------------------------------ team */
.team{padding:clamp(48px,7vw,90px) 0 clamp(72px,9vw,120px)}
.team .h2{margin-bottom:clamp(56px,8vw,110px)}
.team__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(80px,10vw,130px) 4%}
.member{width:46%;position:relative}
.member figure{position:relative;margin:0}
.member img{width:100%;height:auto}
.pill{position:absolute;left:50%;width:122%;margin:0;padding:.7em 1.3em;border:1px solid var(--orange-ink);border-radius:999px;background:var(--cream);color:var(--orange-ink);font-weight:600;font-size:clamp(.85rem,.78rem + .35vw,1.05rem);line-height:1.3;text-align:center}
.pill--top{top:-12%}
.pill--bottom{bottom:-10%}
.member--1 .pill{transform:translateX(-50%) rotate(-11deg)}
.member--2 .pill{transform:translateX(-50%) rotate(9deg)}
.member--3 .pill{transform:translateX(-50%) rotate(12deg)}
.member--4 .pill{transform:translateX(-50%) rotate(-8deg)}
.member--6 .pill{transform:translateX(-50%) rotate(-6deg)}
.member--7 .pill{transform:translateX(-50%) rotate(-12deg)}

/* ------------------------------------------------------------ guarantee */
.guarantee{padding:clamp(56px,8vw,100px) 0 clamp(56px,8vw,100px)}
.gua__grid{display:grid;gap:clamp(24px,4vw,48px) clamp(24px,5vw,72px);align-items:center}
.gua{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.gua p{font-size:clamp(1.0625rem,.95rem + .5vw,1.3rem);line-height:1.5}
.gp{width:min(100%,430px);margin-inline:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.16))}

/* ------------------------------------------------------------ photo: testimonial headline */
.thero{--shade:rgba(18,10,6,.6);background-image:linear-gradient(var(--shade),var(--shade)),url(../img/photo-testimonial-tall.webp);color:#fff;padding:clamp(48px,7vw,96px) 0}
.thero__grid{display:grid;gap:32px;align-items:center}
.thero .who{margin-bottom:1em;font-weight:500;font-size:clamp(1.1rem,1rem + .5vw,1.4rem)}
.thero blockquote{margin:0}
.thero blockquote p{font-size:clamp(1.0625rem,.95rem + .5vw,1.3rem);line-height:1.55}
.thero__phone{width:min(70%,300px);margin-inline:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}

/* ------------------------------------------------------------ quotes */
.quotes{padding:clamp(56px,8vw,100px) 0}
.quote{display:grid;gap:18px clamp(24px,4vw,48px);align-items:center;margin:0 0 clamp(36px,5vw,64px)}
.quote:last-child{margin-bottom:0}
.quote img{width:100%;max-width:420px}
.quote .who{margin-bottom:.5em;color:var(--orange-ink);font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);line-height:1.4}
.quote blockquote{margin:0}
.quote blockquote p{font-size:clamp(1rem,.93rem + .4vw,1.2rem);line-height:1.6}

/* ------------------------------------------------------------ clients */
.clients{--shade:rgba(18,10,6,.4);background-image:linear-gradient(var(--shade),var(--shade)),url(../img/photo-clients-tall.webp);color:#fff;padding:clamp(48px,7vw,96px) 0}
.clients__cols{display:grid;gap:12px clamp(28px,6vw,80px)}
.clients ul{list-style:disc;padding-left:1.4em}
.clients li{margin-bottom:.45em;font-size:clamp(1rem,.93rem + .4vw,1.2rem);line-height:1.5;overflow-wrap:anywhere}
.clients a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------ contact */
.contact{padding:clamp(72px,10vw,120px) 0 clamp(80px,11vw,140px);color:#fff}
.contact::after{display:none}
.contact__btns{display:flex;flex-wrap:wrap;gap:20px 24px;align-items:center}
.contact .btn{min-width:min(100%,320px);min-height:72px;padding-inline:2.4rem}

/* ------------------------------------------------------------ breakpoints */
@media (min-width:640px){
  .points--cols3,.points--cols5{grid-template-columns:1fr 1fr;grid-auto-flow:column}
  .points--cols3{grid-template-rows:repeat(3,auto)}
  .points--cols5{grid-template-rows:repeat(5,auto)}
  .why__cols{grid-template-columns:1fr 1fr}
  .chats__grid{grid-template-columns:repeat(3,1fr)}
  .clients__cols{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .facts li:nth-child(even){margin-top:clamp(20px,4vw,48px)}
  .member{width:calc(25% - 3%)}
  .quote{grid-template-columns:minmax(0,420px) 1fr}
  .compare__media{margin-top:calc(-1 * clamp(80px,10vw,130px))}
}
@media (min-width:900px){
  .hero{min-height:0}
  .hero__bg{position:static;height:auto;width:100%;max-height:860px;object-fit:cover;object-position:30% 0}
  .hero::before{background:linear-gradient(90deg,rgba(20,10,5,.62) 0,rgba(20,10,5,.42) 50%,rgba(20,10,5,0) 78%)}
  .hero__inner{position:absolute;inset:0 0 auto 0;margin-inline:auto;height:100%;min-height:0}
  .hero__title{margin:auto 0}
  .hero__polaroids{top:12%;width:min(44%,520px)}
  .about__grid{grid-template-columns:1.35fr 1fr;align-items:center}
  .about__photo{margin:0}
  .facts{grid-column:1/-1}
  .gua__grid{grid-template-columns:1fr 1fr}
  .g4{grid-column:1;margin-left:clamp(0px,12%,140px)}
  .thero__grid{grid-template-columns:1.4fr 1fr}
  .thero{background-image:linear-gradient(var(--shade),var(--shade)),url(../img/photo-testimonial-wide.webp)}
  .clients{background-image:linear-gradient(var(--shade),var(--shade)),url(../img/photo-clients-wide.webp)}
}
@media (min-width:960px){
  .card__box{width:min(100%,780px)}
  .card--right .card__box{margin-left:auto}
  .card__img{position:absolute;top:50%;transform:translateY(-50%);margin:0}
  .card--left .card__img{left:calc(min(100%,780px) - 36px)}
  .card--right .card__img{right:calc(min(100%,780px) - 36px)}
  .card__img--books{width:clamp(130px,19%,230px)}
  .card__img--temple{width:clamp(170px,26%,320px)}
  .card__img--notebook{width:clamp(150px,22%,260px)}
  .card__img--racket{width:clamp(130px,19%,230px)}
  .card--left .card__img--bells{left:calc(min(100%,780px) - 70px);width:clamp(96px,14%,150px);top:0;transform:translateY(-35%)}
  .cardsphoto .card__box{width:min(100%,720px)}
}
@media (max-width:639px){
  .why__collage{aspect-ratio:360/230}
  .c-girl{left:2%;bottom:6%;width:28%}
  .c-bag,.c-box{display:none}
  .c-kids{left:30%;bottom:0;width:36%}
  .c-couple{left:60%;width:38%}
  .compare__media{width:100%}
  .pill{width:118%;padding:.55em .9em}
  .gp{margin-top:-8px}
  .facts li:nth-child(n){transform:rotate(-1.5deg)}
  .facts li:nth-child(even){transform:rotate(1.5deg)}
  .member{width:46%}
  .btn{width:100%}
  .btn--sm{width:auto}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* hero: between 640 and 899px the polaroids sit top-right; keep the title clear of them */
@media (min-width:640px) and (max-width:899px){
  .hero__title{max-width:calc(100% - min(62vw,300px) - 24px)}
}
@media (min-width:900px){
  .hero__title{max-width:min(13em, calc(56% - 40px))}
}