/* TINDUR — Iceland adventures. Bold, bright, sticker-style. Width-independent. */
:root{
  --paper:#f6f3ec; --paper-2:#ece7db; --white:#fff;
  --ink:#12151a; --ink-2:#4b5059; --ink-3:#80858f;
  --orange:#ff5a1f; --orange-dk:#e0470f; --yellow:#ffd23f; --moss:#0f3b2e; --moss-2:#16523f; --mint:#d6ecd9; --sky:#d9e8f2; --ice:#eaf4f8;
  --line:var(--ink);
  --r:18px; --r-s:10px;
  --wrap:min(92vw, 2300px);
  --gutter:max(4vw, calc((100vw - 2300px)/2));
  --fs:clamp(14px, .5vw + 9.5px, 22px);
  --head:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:4px 4px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:1rem;line-height:1.55;color:var(--ink);background:var(--paper);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.wrap{width:var(--wrap);margin-inline:auto}
h1,h2,h3,h4{font-family:var(--head);font-weight:800;line-height:.98;letter-spacing:-.025em}
h1{font-size:clamp(2.6rem,6.4vw,7rem)}
h2{font-size:clamp(2rem,3.8vw,4.2rem)}
h3{font-size:clamp(1.3rem,1.6vw,1.8rem)}
.kicker{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.kicker::before{content:"";width:.6em;height:.6em;background:var(--orange);border-radius:2px;transform:rotate(45deg)}
.lede{font-size:clamp(1.05rem,1.25vw,1.45rem);line-height:1.45;color:var(--ink-2);max-width:56ch}
.muted{color:var(--ink-3)}
p+p{margin-top:1em}
section{padding-block:clamp(3.5rem,7vw,8rem)}

/* Buttons & chips */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.4em;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:.95em;background:var(--white);box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;white-space:nowrap;line-height:1}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-primary{background:var(--orange);color:var(--white)}
.btn-primary:hover{background:var(--orange-dk)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-yellow{background:var(--yellow)}
.btn svg{width:1.1em;height:1.1em}
.btn-sm{padding:.6em 1em;font-size:.85em;box-shadow:3px 3px 0 var(--ink)}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.35em .8em;border:2px solid var(--ink);border-radius:999px;font-size:.8em;font-weight:700;background:var(--white);line-height:1.2}
.chip.soft{border-color:transparent;background:var(--paper-2)}
.tag{display:inline-block;padding:.3em .7em;border-radius:6px;font-weight:800;font-size:.78em;letter-spacing:.02em;background:var(--yellow);border:2px solid var(--ink);transform:rotate(-2deg)}
.lvl{display:inline-flex;align-items:center;gap:.45em;font-weight:700;font-size:.8em}
.lvl i{display:inline-flex;gap:2px}
.lvl i b{width:.5em;height:.9em;border:1.5px solid var(--ink);border-radius:2px;background:transparent}
.lvl i b.on{background:var(--ink)}
.lvl[data-l="1"] i b.on,.lvl[data-l="2"] i b.on{background:#2e9e5b}
.lvl[data-l="3"] i b.on{background:#e9a600}
.lvl[data-l="4"] i b.on,.lvl[data-l="5"] i b.on{background:var(--orange)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink);padding:.75rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-family:var(--head);font-weight:800;font-size:1.5em;letter-spacing:-.03em;display:flex;align-items:center;gap:.4em}
.logo svg{width:1.1em;height:1.1em}
.nav{display:flex;align-items:center;gap:1.8em}
.nav a{font-weight:700;font-size:.92em;padding:.3em 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--orange)}
.nav .btn{padding:.6em 1em;border-bottom:2px solid var(--ink)}
.burger{display:none;width:2.4rem;height:2.4rem;border:2px solid var(--ink);border-radius:8px;place-items:center;background:var(--white)}
.burger span{display:block;width:1.1rem;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--ink)}
.burger span::before{top:-.4rem}.burger span::after{top:.4rem}
@media (max-width:900px){
  .nav{position:fixed;inset:0;top:0;background:var(--paper);flex-direction:column;justify-content:center;gap:1.6em;transform:translateY(-102%);transition:transform .4s var(--ease);z-index:-1;padding-top:4rem}
  .nav a{font-size:1.4em}.nav.open{transform:none}.burger{display:grid}
}

/* Hero */
.hero{padding-block:clamp(2rem,4vw,4.5rem) clamp(2rem,4vw,4rem)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,4vw,5rem);align-items:center}
.hero h1{margin:.4em 0 .45em;max-width:11ch}
.hero h1 .hl{display:inline-block;background:var(--yellow);padding:0 .12em;border-radius:.1em;transform:rotate(-1.5deg)}
.hero .lede{margin-bottom:1.8rem}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.hero-proof{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.4rem;border-top:2px solid var(--ink);font-size:.9em;max-width:92%}
.hero-proof b{display:block;font-family:var(--head);font-size:1.7em;font-weight:800;line-height:1}
.hero-art{position:relative}
.hero-art .main{border-radius:var(--r);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);aspect-ratio:4/4.6;object-fit:cover;width:100%}
.hero-art .pin{position:absolute;border-radius:var(--r-s);border:2px solid var(--ink);box-shadow:var(--shadow);background:var(--white);overflow:hidden}
.hero-art .pin img{width:100%;height:100%;object-fit:cover}
.hero-art .pin-1{width:32%;aspect-ratio:1;left:-3%;bottom:12%;transform:rotate(-6deg)}
.hero-art .pin-2{width:30%;aspect-ratio:1;right:-6%;top:8%;transform:rotate(5deg)}
.hero-art .price{position:absolute;right:6%;bottom:-4%;background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:.8em 1.1em;font-family:var(--head);font-weight:800;line-height:1;transform:rotate(-6deg);box-shadow:var(--shadow);text-align:center}
.hero-art .price small{display:block;font-family:var(--body);font-weight:700;font-size:.55em;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.25em}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-art{margin:1.5rem 8% 2rem}}

/* Ticker */
.ticker{background:var(--ink);color:var(--paper);border-block:2px solid var(--ink);overflow:hidden;padding:.7rem 0;font-weight:700;font-size:.9em;letter-spacing:.02em}
.ticker div{display:flex;gap:2.5rem;width:max-content;animation:tick 40s linear infinite}
.ticker span::before{content:"✦";color:var(--yellow);margin-right:2.5rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* Section heads */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:clamp(1.6rem,3vw,3rem);flex-wrap:wrap}
.sec-head h2{margin-top:.35em}
.sec-head p{max-width:48ch;color:var(--ink-2)}

/* Filters */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.8rem}
.filters button{padding:.5em 1em;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:.88em;background:var(--white);transition:background .2s,color .2s}
.filters button:hover{background:var(--paper-2)}
.filters button.on{background:var(--ink);color:var(--white)}

/* Tour cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(260px,22vw,380px),1fr));gap:clamp(1rem,1.6vw,1.8rem)}
.card{display:flex;flex-direction:column;background:var(--white);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease);box-shadow:0 0 0 var(--ink)}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.card.hide{display:none}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:2px solid var(--ink)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.card-img .tag{position:absolute;left:.9rem;top:.9rem}
.card-img .lvl{position:absolute;right:.9rem;top:.9rem;background:var(--white);padding:.3em .6em;border-radius:999px;border:2px solid var(--ink)}
.card-img .dur{position:absolute;left:.9rem;bottom:.9rem;background:var(--ink);color:var(--white);padding:.3em .7em;border-radius:999px;font-size:.78em;font-weight:700}
.card-body{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.card-body h3{font-size:clamp(1.2rem,1.35vw,1.55rem)}
.card-body p{color:var(--ink-2);font-size:.92em}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.8rem;border-top:2px dashed var(--paper-2)}
.price{font-family:var(--head);font-weight:800;font-size:1.35em;line-height:1}
.price small{display:block;font-family:var(--body);font-weight:500;font-size:.6em;color:var(--ink-3);margin-top:.25em}
.card-foot .btn-sm{box-shadow:none}
.card-foot .btn-sm:hover{transform:none;background:var(--orange-dk)}

/* Levels guide */
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.8rem,1.2vw,1.4rem)}
.level{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;min-height:100%}
.level svg{width:100%;height:auto}
.level b{font-family:var(--head);font-size:1.3em;font-weight:800}
.level p{font-size:.88em;color:var(--ink-2)}
.level .ex{font-size:.8em;font-weight:700;margin-top:auto;padding-top:.6rem;border-top:2px dashed var(--paper-2)}
@media (max-width:1100px){.levels{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.levels{grid-template-columns:1fr 1fr}}

/* Compare */
.on-moss{background:var(--moss);color:var(--paper)}
.on-moss .sec-head p{color:rgba(246,243,236,.75)}
.on-moss .kicker{color:var(--yellow)}.on-moss .kicker::before{background:var(--yellow)}
.compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;font-size:.95em}
.compare th,.compare td{padding:1em 1.2em;text-align:left;border-bottom:2px solid var(--paper-2);vertical-align:top}
.compare tr:last-child td{border-bottom:0}
.compare th{background:var(--paper-2);font-family:var(--head);font-weight:800;font-size:1.05em}
.compare th:nth-child(2){background:var(--yellow)}
.compare td:nth-child(2){font-weight:700;background:#fff8dc}
.compare td:first-child{font-weight:700;color:var(--ink-2)}
.compare .no{color:var(--ink-3)}
.compare-wrap{overflow-x:auto}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2.5rem);counter-reset:s}
.step{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:1.5rem;counter-increment:s;position:relative}
.step::before{content:counter(s);position:absolute;top:-1rem;left:1.2rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--orange);color:#fff;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--head);font-weight:800}
.step h3{margin:.6rem 0 .5rem}
.step p{color:var(--ink-2);font-size:.95em}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem)}
.review{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.review .stars{color:var(--orange);letter-spacing:.1em;font-size:.9em}
.review p{font-weight:500;font-size:1.02em}
.review footer{font-size:.85em;color:var(--ink-3);margin-top:auto}
.review footer b{color:var(--ink)}
@media (max-width:800px){.reviews{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:900px}
.faq details{border:2px solid var(--ink);border-radius:var(--r-s);background:var(--white);margin-bottom:.7rem;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1em 1.2em;font-weight:700;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--head);font-weight:800;font-size:1.3em;line-height:1;color:var(--orange)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.2em 1.2em;color:var(--ink-2)}

/* CTA */
.cta{background:var(--orange);color:var(--white);border-block:2px solid var(--ink);text-align:center}
.cta h2{margin:.3em auto .4em;max-width:20ch}
.cta p{max-width:50ch;margin-inline:auto;opacity:.95}
.cta .btn{margin-top:1.6rem}

/* Footer */
.site-footer{background:var(--ink);color:rgba(246,243,236,.8);padding:clamp(3rem,5vw,5rem) 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:2.5rem}
.foot-grid h4{font-family:var(--body);font-weight:700;font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin-bottom:1rem}
.foot-grid li{margin-bottom:.45rem;font-size:.95em}
.foot-grid a:hover{color:var(--yellow)}
.foot-logo{font-family:var(--head);font-weight:800;font-size:2em;color:var(--paper);letter-spacing:-.03em}
.foot-logo+p{max-width:34ch;margin-top:.8rem;font-size:.95em}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgba(246,243,236,.2);font-size:.8em}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ===== Tour page ===== */
.tour-top{padding-block:clamp(1.5rem,3vw,3rem) 0}
.crumbs{font-size:.85em;color:var(--ink-3);margin-bottom:1rem}
.crumbs a:hover{color:var(--ink)}
.tour-hero{position:relative;border-radius:var(--r);border:2px solid var(--ink);overflow:hidden;box-shadow:8px 8px 0 var(--ink);aspect-ratio:16/7;background:var(--ink)}
.tour-hero img{width:100%;height:100%;object-fit:cover}
.tour-hero .tag{position:absolute;left:1.4rem;top:1.4rem;font-size:.95em}
.tour-hero .cap{position:absolute;right:1.2rem;bottom:1rem;font-size:.75em;color:#fff;opacity:.8;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media (max-width:700px){.tour-hero{aspect-ratio:4/3}}
.tour-title{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,440px);gap:clamp(1.5rem,4vw,5rem);margin-top:clamp(1.5rem,3vw,3rem);align-items:start}
.tour-title h1{font-size:clamp(2.2rem,4.6vw,5.4rem);margin:.2em 0 .4em}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.tour-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,440px);gap:clamp(1.5rem,4vw,5rem);align-items:start}
.tour-main>*+*{margin-top:clamp(2.5rem,4vw,4.5rem)}
.tour-main h2{font-size:clamp(1.7rem,2.6vw,3rem);margin:.3em 0 .5em}
.short{display:grid;gap:.7rem;margin-top:1rem}
.short li{display:flex;gap:.8em;align-items:flex-start;background:var(--white);border:2px solid var(--ink);border-radius:var(--r-s);padding:.8em 1em;font-weight:500}
.short li::before{content:"✓";color:var(--orange);font-weight:800;flex:none}
.timeline{border-left:3px solid var(--ink);margin-left:.6rem;padding-left:1.6rem;display:grid;gap:1.2rem}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:calc(-1.6rem - 9px);top:.35em;width:12px;height:12px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink)}
.timeline b{font-family:var(--head);font-weight:800;display:inline-block;min-width:5em;color:var(--orange)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,3rem)}
.two h3{margin-bottom:.6em}
.two li{padding:.5em 0;border-bottom:2px dashed var(--paper-2);display:flex;gap:.7em}
.two .inc li::before{content:"+";color:#2e9e5b;font-weight:800}
.two .bring li::before{content:"→";color:var(--orange);font-weight:800}
@media (max-width:640px){.two{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.fact{background:var(--white);border:2px solid var(--ink);border-radius:var(--r-s);padding:.9rem 1rem}
.fact span{display:block;font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fact b{font-family:var(--head);font-size:1.15em;font-weight:800}
@media (max-width:640px){.facts{grid-template-columns:1fr 1fr}}
.meter{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.meter .bar{flex:1;height:14px;border:2px solid var(--ink);border-radius:999px;background:var(--white);overflow:hidden}
.meter .bar i{display:block;height:100%;background:linear-gradient(90deg,#2e9e5b,#e9a600,var(--orange))}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;border:2px solid var(--ink);border-radius:var(--r-s)}
.gallery img:first-child{grid-column:span 2;aspect-ratio:auto;height:100%}
@media (max-width:640px){.gallery{grid-template-columns:1fr 1fr}.gallery img:first-child{grid-column:span 2}}
.map{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.map svg{width:100%;height:auto}
@media (max-width:800px){.map{grid-template-columns:1fr}}

/* Booking card */
.aside{position:sticky;top:5.5rem}
.book{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);padding:1.4rem;display:grid;gap:1rem}
.book .price{font-size:2.2em}
.book .price small{font-size:.45em}
.book label{display:grid;gap:.3rem;font-size:.8em;font-weight:700}
.book input,.book select{padding:.7em .9em;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--paper);width:100%}
.book .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.book .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:.8rem;border-top:2px dashed var(--paper-2);font-weight:700}
.book .total b{font-family:var(--head);font-size:1.5em;font-weight:800}
.book .btn{justify-content:center}
.book .fine{font-size:.78em;color:var(--ink-3)}
.book .fine b{color:var(--ink)}
@media (max-width:1000px){.tour-title,.tour-body{grid-template-columns:1fr}.aside{position:static}}

/* Booking page / about */
.page-head{padding-block:clamp(2.5rem,5vw,5rem) clamp(1.5rem,3vw,3rem)}
.page-head h1{font-size:clamp(2.4rem,5vw,5.6rem);margin:.25em 0 .3em}
.form{display:grid;gap:1.1rem;max-width:760px}
.form label{display:grid;gap:.35rem;font-size:.85em;font-weight:700}
.form input,.form select,.form textarea{padding:.8em 1em;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--white);width:100%}
.form textarea{min-height:7em;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.note-box{background:var(--mint);border:2px solid var(--ink);border-radius:var(--r-s);padding:1rem 1.2rem;font-size:.95em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.split img{border:2px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:800px){.split{grid-template-columns:1fr}}

/* Reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.ticker div{animation:none}}