/*
  Obra Clara Reformas, Madrid
  Harmony: complementary. Petrol blue (about 200 deg) against site orange (about 25 deg), taken from the
  blue cement tiles and the orange fruit on the new kitchen counters of the photo shoot, over plaster white.
  60  --plaster  #F4F3EF  page background (dominant)
  30  --petrol   #173F52  dark bands, header text, footer | --ink #14232B body text | --steel #45555C secondary text
      --concrete #E3E2DC  secondary surfaces            | --mist #B8C9D1 text on petrol
  10  --orange   #E27A26  buttons and measuring marks (ink text on it) | --rust #A34F0B orange-family text on light
      --amber    #F2A15C  orange on petrol backgrounds
  Contrast (WCAG): ink on plaster 14.49, steel on plaster 6.99, plaster on petrol 10.12, ink on orange 5.40,
  amber on petrol 5.36, ink on concrete 12.40, rust on plaster 5.14, mist on petrol 6.59, steel on concrete 5.98.
*/
:root {
  --plaster: #F4F3EF;
  --concrete: #E3E2DC;
  --petrol: #173F52;
  --petrol-2: #1D5670;
  --ink: #14232B;
  --steel: #45555C;
  --mist: #B8C9D1;
  --orange: #E27A26;
  --rust: #A34F0B;
  --amber: #F2A15C;
  --grid: rgba(23, 63, 82, .08);
  --display: "Archivo", system-ui, sans-serif;
  --body: "Public Sans", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 80px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--plaster); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--petrol-2); }
h1, h2, h3 { font-family: var(--display); font-stretch: 112%; font-weight: 800; margin: 0; line-height: .98; letter-spacing: -.02em; color: var(--petrol); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.hidden { display: none; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--petrol); color: #fff; padding: 10px 14px; }
.skip:focus { left: 8px; }

/* header */
.top { position: sticky; top: 0; z-index: 40; background: var(--plaster); border-bottom: 2px solid var(--petrol); }
.top__in { display: flex; align-items: center; gap: 28px; padding: 14px var(--pad); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; color: var(--petrol); }
.brand svg { width: 40px; height: 40px; }
.brand b { font: 800 22px/1 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.brand span { display: block; font: 500 13px/1.2 var(--body); color: var(--steel); letter-spacing: 0; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; padding: 10px 14px; position: relative; }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .nav__cta { background: var(--orange); color: var(--ink); margin-left: 10px; padding: 13px 20px; font-weight: 700; }
.nav .nav__cta::after { display: none; }
.nav .nav__cta:hover, .nav .nav__cta[aria-current="page"] { background: var(--petrol); color: #fff; }
.menu-btn { display: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 2px solid transparent; font: 700 16px/1 var(--body); text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn--orange { background: var(--orange); color: var(--ink); }
.btn--orange:hover { background: var(--petrol); color: #fff; }
.btn--petrol { background: var(--petrol); color: #fff; }
.btn--petrol:hover { background: var(--orange); color: var(--ink); }
.btn--line { border-color: var(--petrol); color: var(--petrol); background: transparent; }
.btn--line:hover { background: var(--petrol); color: #fff; }

/* measuring tape rule used as a section marker */
.tape { height: 14px; background: repeating-linear-gradient(90deg, var(--petrol) 0 1.5px, transparent 1.5px 10px), repeating-linear-gradient(90deg, var(--petrol) 0 1.5px, transparent 1.5px 50px); background-size: 100% 7px, 100% 14px; background-repeat: repeat-x; background-position: 0 0, 0 0; opacity: .5; }

/* hero */
.hero { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(40px, 5vw, 72px) var(--pad) clamp(56px, 6vw, 88px); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; }
.hero h1 { font-size: clamp(50px, 6.6vw, 104px); font-stretch: 125%; }
.hero__lede { font-size: 19px; color: var(--steel); max-width: 44ch; margin: 26px 0 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.promise { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.promise li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.promise li::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3 3 7-7' fill='none' stroke='%2314232B' stroke-width='2.2'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* before / after */
.ba { position: relative; overflow: hidden; background: var(--concrete); user-select: none; --pos: 50%; }
.ba img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--orange); pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: var(--pos); width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; pointer-events: none; box-shadow: 0 8px 24px rgba(20, 35, 43, .35); }
.ba__knob svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ba__tag { position: absolute; top: 16px; padding: 7px 12px; font: 700 14px/1 var(--body); pointer-events: none; }
.ba__tag--b { left: 16px; background: var(--ink); color: #fff; }
.ba__tag--a { right: 16px; background: var(--plaster); color: var(--ink); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba input[type=range]:focus-visible ~ .ba__knob { outline: 3px solid var(--plaster); outline-offset: 3px; }
.hero__ba { aspect-ratio: 4 / 3.3; }
.hero__ba > .ba { height: 100%; }
.mini { display: none; }
.hero__ba-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 15px; color: var(--steel); }
.hero__ba-cap b { color: var(--ink); }

/* stats strip */
.strip { background: var(--petrol); color: var(--plaster); display: grid; grid-template-columns: repeat(4, 1fr); }
.strip div { padding: 30px var(--pad) 28px; border-right: 1px solid rgba(184, 201, 209, .25); }
.strip div:last-child { border-right: 0; }
.strip b { display: block; font: 800 44px/1 var(--display); font-stretch: 125%; color: var(--amber); }
.strip span { color: var(--mist); font-size: 15px; }

/* sections */
.sec { padding: clamp(80px, 9vw, 128px) var(--pad); }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; align-items: end; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(40px, 5vw, 76px); }
.sec-head p { margin: 0; color: var(--steel); max-width: 48ch; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile { text-decoration: none; color: inherit; background: #fff; border: 1.5px solid var(--concrete); display: flex; flex-direction: column; }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile div { padding: 20px 20px 22px; display: grid; gap: 6px; }
.tile h3 { font-size: 24px; }
.tile p { margin: 0; color: var(--steel); font-size: 15px; }
.tile strong { color: var(--rust); font-size: 16px; }
.tile:hover { border-color: var(--petrol); }

/* process timeline */
.process { background: var(--concrete); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: p; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 3px; background: var(--petrol); }
.timeline li { counter-increment: p; padding-right: 28px; position: relative; }
.timeline li::before { content: counter(p); position: relative; display: grid; place-items: center; width: 56px; height: 56px; background: var(--orange); color: var(--ink); font: 800 24px/1 var(--display); margin-bottom: 22px; }
.timeline h3 { font-size: 24px; margin-bottom: 8px; }
.timeline p { margin: 0; color: var(--steel); font-size: 16px; }
.timeline small { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--petrol-2); border-bottom: 2px solid var(--orange); }

/* cta */
.cta { background: var(--petrol); color: var(--plaster); padding: clamp(64px, 8vw, 110px) var(--pad); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.cta h2 { color: var(--plaster); font-size: clamp(40px, 5vw, 76px); font-stretch: 125%; }
.cta p { color: var(--mist); max-width: 46ch; margin: 18px 0 0; }
.cta__box { justify-self: end; display: grid; gap: 12px; }

/* page head */
.phead { padding: clamp(48px, 6vw, 88px) var(--pad) clamp(32px, 4vw, 52px); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; border-bottom: 2px solid var(--petrol); }
.phead h1 { font-size: clamp(52px, 7.6vw, 120px); font-stretch: 125%; }
.phead p { max-width: 58ch; color: var(--steel); font-size: 19px; margin: 22px 0 0; }

/* services page */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(48px, 6vw, 80px) var(--pad); border-bottom: 1px solid var(--concrete); }
.svc:nth-child(even) .svc__img { order: 2; }
.svc__img { position: relative; }
.svc__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.svc__img span { position: absolute; left: 0; bottom: 0; background: var(--orange); color: var(--ink); font: 800 17px/1 var(--display); padding: 12px 16px; }
.svc h2 { font-size: clamp(34px, 3.6vw, 52px); margin-bottom: 14px; }
.svc > div > p { color: var(--steel); max-width: 52ch; }
.svc ul { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.svc li { padding-left: 22px; position: relative; font-size: 16px; }
.svc li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 3px; background: var(--orange); }

/* quote builder */
.quote { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(40px, 5vw, 72px) var(--pad) clamp(80px, 9vw, 120px); align-items: start; }
.q-form { display: grid; gap: 34px; }
.q-step { border: 0; padding: 0; margin: 0; }
.q-step legend { display: flex; align-items: center; gap: 12px; font: 800 26px/1.1 var(--display); font-stretch: 112%; color: var(--petrol); margin-bottom: 16px; padding: 0; }
.q-step legend span { width: 36px; height: 36px; display: grid; place-items: center; background: var(--petrol); color: #fff; font-size: 17px; }
.types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.types input, .quals input, .xtras input { position: absolute; opacity: 0; }
.types span { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 18px 8px 14px; background: #fff; border: 2px solid var(--concrete); cursor: pointer; font-weight: 700; font-size: 15px; height: 100%; }
.types svg { width: 38px; height: 38px; fill: none; stroke: var(--petrol); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.types input:checked + span { border-color: var(--petrol); background: var(--petrol); color: #fff; }
.types input:checked + span svg { stroke: var(--amber); }
.types input:focus-visible + span, .quals input:focus-visible + span, .xtras input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.m2 { background: #fff; border: 2px solid var(--concrete); padding: 20px 22px; }
.m2__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.m2 output { white-space: nowrap; font: 800 40px/1 var(--display); font-stretch: 125%; color: var(--petrol); }
.m2 input { width: 100%; accent-color: var(--orange); height: 28px; }
.m2__scale { display: flex; justify-content: space-between; font-size: 14px; color: var(--steel); }
.quals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quals span { display: grid; gap: 4px; padding: 16px 18px; background: #fff; border: 2px solid var(--concrete); cursor: pointer; height: 100%; }
.quals b { font: 800 19px/1.1 var(--display); font-stretch: 112%; color: var(--petrol); }
.quals small { font-size: 14px; color: var(--steel); }
.quals input:checked + span { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: #FFF6EE; }
.xtras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xtras span { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px; background: #fff; border: 2px solid var(--concrete); cursor: pointer; font-weight: 600; font-size: 16px; }
.xtras span i { font-style: normal; font-weight: 700; color: var(--rust); font-size: 15px; white-space: nowrap; }
.xtras input:checked + span { border-color: var(--petrol); background: #EAF1F4; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.fields .wide { grid-column: 1 / -1; }
.fields input, .fields select, .fields textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--concrete); background: #fff; font: 400 16px/1.4 var(--body); color: var(--ink); border-radius: 0; }
.fields input:focus, .fields select:focus, .fields textarea:focus { outline: none; border-color: var(--petrol); }
.total { position: sticky; top: 96px; background: var(--petrol); color: var(--plaster); padding: clamp(26px, 3vw, 40px); }
.total h2 { color: var(--plaster); font-size: 24px; font-stretch: 112%; }
.total__sum { margin: 10px 0 2px; font: 800 clamp(40px, 4.4vw, 62px)/1 var(--display); font-stretch: 125%; color: var(--amber); }
.total__desc { margin: 0 0 24px; color: var(--mist); font-size: 16px; }
.split { display: flex; height: 16px; margin-bottom: 12px; }
.split i { display: block; transition: flex-grow .4s; }
.split i:nth-child(1) { background: var(--amber); }
.split i:nth-child(2) { background: var(--mist); }
.split i:nth-child(3) { background: #fff; }
.legend { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.legend li { display: flex; justify-content: space-between; gap: 12px; color: var(--mist); }
.legend li span { display: inline-flex; align-items: center; gap: 8px; }
.legend li span::before { content: ""; width: 12px; height: 12px; background: var(--c); }
.legend b { color: var(--plaster); }
.total__weeks { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(184,201,209,.3); border-bottom: 1px solid rgba(184,201,209,.3); margin-bottom: 22px; color: var(--mist); }
.total__weeks b { font: 800 26px/1 var(--display); color: var(--plaster); }
.total .btn { width: 100%; }
.total__note { font-size: 14px; color: var(--mist); margin: 14px 0 0; }
.ok { margin: 0; padding: 16px 18px; background: var(--petrol-2); color: #fff; }

/* works gallery */
.works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 32px; padding: clamp(48px, 6vw, 80px) var(--pad) clamp(80px, 9vw, 120px); }
.work .ba { aspect-ratio: 3 / 2; }
.work h2 { font-size: 30px; margin: 20px 0 8px; }
.work p { margin: 0; color: var(--steel); }
.work dl { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; padding-top: 14px; border-top: 2px solid var(--petrol); }
.work dt { font-size: 13px; color: var(--steel); font-weight: 600; }
.work dd { margin: 0; font: 800 18px/1.2 var(--display); font-stretch: 112%; color: var(--petrol); }
.work--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: end; }
.work--wide .ba { aspect-ratio: 16 / 9; }

/* footer */
.foot { background: var(--ink); color: var(--mist); padding: 60px var(--pad) 32px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
.foot b { display: block; font: 800 30px/1 var(--display); font-stretch: 125%; color: var(--plaster); margin-bottom: 12px; }
.foot h3 { font: 700 15px/1.2 var(--body); color: var(--plaster); margin-bottom: 10px; letter-spacing: 0; }
.foot p { margin: 0 0 8px; }
.foot a { color: var(--plaster); }
.foot__credit { grid-column: 1 / -1; border-top: 1px solid rgba(184,201,209,.25); padding-top: 22px; font-size: 14px; }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .types { grid-template-columns: repeat(3, 1fr); }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .timeline::before { display: none; }
}
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 2px solid var(--petrol); background: transparent; color: var(--petrol); font: 700 16px/1 var(--body); cursor: pointer; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--plaster); padding: 8px var(--pad) 22px; border-bottom: 2px solid var(--petrol); display: none; }
  .nav.is-open { display: flex; }
  .nav a { padding: 15px 0; font-size: 18px; border-bottom: 1px solid var(--concrete); }
  .nav a::after { display: none; }
  .nav .nav__cta { margin: 14px 0 0; text-align: center; }
  .hero, .sec-head, .cta, .svc, .quote, .work--wide { grid-template-columns: 1fr; }
  .svc:nth-child(even) .svc__img { order: 0; }
  .cta__box { justify-self: start; }
  .total { position: static; scroll-margin-top: 90px; }
  .mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--pad); background: var(--petrol); color: var(--plaster); border-top: 3px solid var(--orange); }
  .mini span { font-size: 14px; color: var(--mist); display: block; }
  .mini b { font: 800 20px/1.1 var(--display); color: var(--amber); }
  .mini a { color: var(--plaster); font-weight: 700; font-size: 15px; white-space: nowrap; }
  .has-mini .foot { padding-bottom: 96px; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip div:nth-child(2) { border-right: 0; }
  .strip div:nth-child(-n+2) { border-bottom: 1px solid rgba(184, 201, 209, .25); }
  .works { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand span span { display: none; }
  .phead h1 { font-size: 12.5vw; font-stretch: 100%; }
  .hero h1 { font-size: 15vw; }
  .brand b { font-size: 19px; }
  .promise { grid-template-columns: 1fr; }
  .tiles, .timeline { grid-template-columns: 1fr; }
  .types { grid-template-columns: repeat(2, 1fr); }
  .quals, .xtras, .fields { grid-template-columns: 1fr; }
  .svc ul { grid-template-columns: 1fr; }
  .strip b { font-size: 34px; }
  .strip div { padding: 22px 20px; }
  .hero__ba { aspect-ratio: 4 / 3.6; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}